46. useEffect - Ejemplo de uso

 

Tutorial: useEffect - Ejemplo de uso

🎯 Objetivo

Aprender a utilizar el hook useEffect en React para ejecutar efectos secundarios en componentes funcionales.

📚 ¿Qué es useEffect?

useEffect es un hook de React que te permite realizar efectos secundarios en componentes funcionales. Sustituye a los métodos del ciclo de vida de los componentes de clase como:

• componentDidMount

• componentDidUpdate

• componentWillUnmount

🚗 Ejemplo Práctico: Componente de Coche

Vamos a analizar el código proporcionado paso a paso:

1. Importación de React y Hooks

javascript

import React, { useState, useEffect } from "react";

Primero importamos useEffect junto con los otros hooks necesarios.

2. Creación del Componente

javascript

export default function Car() {

    const [started, setStarted] = useState(false);

• Creamos un estado started que controla si el coche está encendido (true) o apagado (false).

• Valor inicial: false (apagado).

3. Implementación de useEffect

javascript

useEffect(() => {

    document.title = `Coche ${started}`;

}, [started]);

Explicación detallada:

1. Función efecto: La función dentro de useEffect se ejecutará después de que el componente se renderice.

2. Efecto específico: Cambia el título de la página web a "Coche true" o "Coche false".

3. Array de dependencias [started]:

• Indica que el efecto se debe ejecutar solo cuando la variable started cambie.

• Sin este array, el efecto se ejecutaría después de cada renderizado.

• Con un array vacío [], solo se ejecutaría una vez (al montar el componente).

4. Función para Mostrar el Estado

javascript

const checkStateCar = () => {

    if (started) {

        return <span style={{ color: "green" }}>Encendido</span>;

    }

    return <span style={{ color: "red" }}>Apagado</span>;

};

Esta función devuelve un elemento visual que cambia de color según el estado del coche:

• Verde: Cuando está encendido

• Rojo: Cuando está apagado

5. Renderizado del Componente

javascript

return (

    <div>

        <h2>Nuestro coche está: {checkStateCar()} </h2>

        <button

            onClick={() => {

                setStarted(!started);

            }}

        >

            Encender / Apagar

        </button>

    </div>

);

• Muestra el estado actual del coche.

• Botón que alterna entre encendido y apagado al hacer clic.

🔄 Flujo de Ejecución

1. Renderizado inicial:

• El componente se monta con started = false.

• useEffect se ejecuta por primera vez → título: "Coche false".

• La interfaz muestra "Apagado" en rojo.

2. Usuario hace clic en el botón:

• setStarted(!started) cambia el estado a true.

• El componente se vuelve a renderizar.

• useEffect detecta que started cambió → se ejecuta de nuevo.

• Título actualizado a "Coche true".

• La interfaz muestra "Encendido" en verde.

💡 Puntos Clave

Uso Correcto del Array de Dependencias

javascript

// ✅ CORRECTO: Solo se ejecuta cuando "started" cambia

useEffect(() => {

    document.title = `Coche ${started}`;

}, [started]);

// ❌ SIN array: Se ejecuta después de CADA renderizado

useEffect(() => {

    document.title = `Coche ${started}`;

});

// ✅ CON array vacío: Solo al montar el componente (como componentDidMount)

useEffect(() => {

    console.log("Componente montado");

}, []);

Tipos de Efectos Comunes

1. Actualizar el DOM (como en nuestro ejemplo)

2. Llamadas a APIs (fetch de datos)

3. Suscripciones a eventos

4. Configurar temporizadores

5. Limpiar recursos (con función de limpieza)

🧹 Función de Limpieza (Cleanup)

useEffect puede devolver una función de limpieza:

javascript

useEffect(() => {

    // Código del efecto

    const interval = setInterval(() => {

        console.log("Tick");

    }, 1000);

    

    // Función de limpieza (como componentWillUnmount)

    return () => {

        clearInterval(interval);

    };

}, []);

🎯 Conclusión

En este ejemplo hemos aprendido:

• Cómo importar y usar useEffect.

• La importancia del array de dependencias para controlar cuándo se ejecuta el efecto.

• Cómo useEffect sustituye los métodos del ciclo de vida de componentes de clase.

• Un caso práctico de actualización del título de la página basado en el estado.

Recuerda: useEffect se ejecuta después del renderizado, por lo que es ideal para efectos secundarios que no bloqueen la actualización de la UI.

🚀 Próximos Pasos

• Experimenta añadiendo más efectos secundarios.

• Prueba a usar la función de limpieza.

• Intenta combinar múltiples efectos en un componente.

• Practica con llamadas a APIs reales usando useEffect.

¡Ahora estás listo para implementar useEffect en tus proyectos de React!