useEffect

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

useEffect

Gracias a este hook, podremos realizar operaciones durante las etapas del ciclo de vida de un componente:

• Montaje: Cuando se comienza a visualizar un componente
• Update: Cuando cambia un estado o una prop de un componente
• Desmontaje : Cuando un componente se deja de visualizar

useEffect(() => {
    console.log('Este código se ejecutará cada vez que el componente se monte.')
    return () => {
        console.log('Este mensaje se ejecutará cada vez que el componente se desmonte')
    }
}, [count]);

Posibles valores del segundo parámetro del useEffect (el array)

• [] (array vacío) → El código se ejecutará en el montaje del componente.
• [prop] (array con un estado) → El código se ejecutará en el montaje del componente y en en cada cambio del valor de prop.
• undefined (useEffect( () => {} )) → El código se ejecutará en cada render.

Ejecución de código en el desmontaje de un componente

Utilizaremos el return del useEffect:

import { useState } from "react";
import C1 from './C1';

const App = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            {
                count % 2 == 0 ? <C1 /> : <div>txt</div>
            }
            <button onClick={() => setCount(count + 1)}>Pulsar</button>
        </div>
    );
}
export default App;

import { useEffect } from "react";

const C1 = () => {
    useEffect(() => {
        return () => {
            console.log('C1 se desmonta')
        }
    }, []);

    return (
        <div>C1</div>
    )
}

export default C1;

Cada vez que haya un cambio de estado se ejecutará el return del useEffect. El return del useEffect se llama clean up function. Se ejecuta en el desmontaje de un componente. Aquí pondríamos por, ejemplo limpiar un timeout para evitar que se acumulen con anteriores ejecuciones del useEffect donde se haya registrado ese timeout. Sólo quedaría el último timeout porque los anteriores se habrán limpiado con el clear y no se habrán ejecutado)

import { useEffect, useState } from "react";

const App = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        const t = setTimeout(() => {
            console.log('hola');
        }, [2000]);
        return () => {
            clearTimeout(t);
        }
    }, [count]);
    return (
        <div>
            {count}
            <button onClick={() => setCount(count + 1)}>Pulsar</button>
        </div>
    );
}
export default App;

React.StrictMode

<React.StrictMode>
  <App />
</React.StrictMode>