Métodos del Ciclo de Vida del Componente (Hooks)

Ejercicio: Crea un componente que obtenga datos de un API y los muestre usando useEffectpara manejar y liberar recuersos si es necesario.
Práctica: Entender como usar useEffectpara distintos escenarios, como obtener datos, configuración de suscripciones o liberar recursos.

Paso 1: Configurar el Componente

Empieza creando un componente funcional básico en React.

const DataFetchingComponent = () => {
    return(
        <div>
            <h1>Data Fetching Component</h1>
        </div>
    );
};

export default DataFetchingComponent;

Paso 2: Añade state para almacenar los datos

Necesitas una variable state para almacenar los datos obtenidos de la API. Usa el hook useState para esto.

import {useState} from 'react';

const DataFetchingComponent = () => {
    const [data, setData] = useState(null); //Initialize state for storing data
    
    return(
        <div>
            <h1>Data Fetching Component</h1>
        </div>
    );
};

export default DataFetchingComponent;

Explicación:
- useState(null)inicializa data con un valor null.
- setData es la función que usarás para actualizar el data state.

Paso 3: Obtener los datos con useEffect

Ahora usa el useEffect hook para obtener la data cuando el componente sea montado.

import {useState, useEffect} from 'react';

const DataFetchingComponent = () => {
    const [data, setData] = useState(null);
    
    useEffect(() => {
        const fetchData = async() =>{
            try{
                const response = await fetch('https://jsonplaceholder.typicode.com/posts');
                const result = await response.json();
                setData(result);
            } catch(error) {
                console.error(`Error fetching data: ${error}`);
            }
        };
        
        fetchData();
    },[]); // Empty dependency array to run only once on mount
    
    return(
        <div>
            <h1>Data Fetching Component</h1>
        </div>
    )
};

export default DataFetchingComponent;

Explicación:
- useEffect(() => {}, []) corre el código una vez, cuando el componente es montado. El array vacío [] se asegura de esto.
- fetchData es una función asincrona que obtiene los datos de la API suministrada.
- setData(result) actualiza el data con el resultado obtenido.

Paso 4: Renderizar los datos obtenidos

Ahora que los datos se han obtenido y están almacenados, renderízalos en tu componente.

import {useState, useEffect} from 'react';

const DataFetchingComponent = () => {
    const [data, setData], useState(null);
    
    useEffect(() => {
        const fetchData = async() => {
            try{
                const response = await fetch('https://jsonplaceholder.typicode.com/posts');
                const result = await response.json();
                setData(result);
            }catch(error){
                console.error(`Error fetching data: ${error}`);
            }
        }
        
        fetchData();
    }, []);
    
    return(
    <div>
        <h1>Fetching data example</h1>
        {data ? (
            <ul>
            {data.map((item, idx) => (
                <li key="{idx}">{item.title}</li>
            ))}    
            </ul>
            ) : (
                <p>Loading...</p>
            )
        }
    </div>
    );
};

export default DataFetchingComponent;

Explicación:
- data ? (...):(...): Este es un operador condicional (ternario). Si data no es nullrenderiza una lista de los datos; de otra forma muestra un mensaje de "Loading..."
- data.map((item, idx) => ...): Itera sobre el array de los datos obtenidos y renderiza cada uno como elemento de una lista.

Liberar recursos (si es necesario)

En algunos casos, es posible que debas limpiar después de los efectos secundarios. Por ejemplo, si configuras suscripciones o temporizadores. En este caso, no se requiere limpieza porque no hay ninguna suscripción o temporizador en curso.

import {useState, useEffect} from 'react';

const DataFetchingComponent = () => {
    const [data, setData], useState(null);
    
    useEffect(() => {
        const fetchData = async() => {
            try{
                const response = await fetch('https://jsonplaceholder.typicode.com/posts');
                const result = await response.json();
                setData(result);
            }catch(error){
                console.error(`Error fetching data: ${error}`);
            }
        }
        
        fetchData();
        
        //Cleanup function (not necessary here)
        return () =>{
            //cleanup logic (e.g., unsubscribe, clear timers, etc.)
        }
    }, []);
    
    return(
    <div>
        <h1>Fetching data example</h1>
        {data ? (
            <ul>
            {data.map((item, idx) => (
                <li key="{idx}">{item.title}</li>
            ))}    
            </ul>
            ) : (
                <p>Loading...</p>
            )
        }
    </div>
    );
};

export default DataFetchingComponent;

Conclusiones

useEffect: Este hook es esencial para los efectos secundarios en componentes funcionales, como la obtención de datos. Puede ejecutarse al montar, al actualizar o al desmontar, dependiendo del array de dependencias.
useState: Maneja el estado local del componente, permitiéndole ser reactivo a los cambios (por ejemplo, actualizando la interfaz de usuario cuando se obtienen nuevos datos).
Renderizado condicional: Maneja diferentes estados (cargando, error, éxito) con lógica condicional.

Puedes encontrar este ejemplo utilizando TypeScript en mi github