Curso de React | 18. 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

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

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:

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

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)

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Suscríbete

React.StrictMode

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Problema al usar estados con setInterval y setTimeout

La siguiente función:

setInterval( () => setSeconds(seconds +1), 1000);

Debería actualizar el estado seconds incrementándole una unidad a cada segundo. Sin embargo esto no ocurre debido a que la función que recibe como parámetro setInterval es almacenada en memoria y no se va a actualizar (siempre se llamará exáctamente al mismo código y seconds siempre valdrá lo mismo).

Para subsanar este problema, cambiaremos la función anterior por:

setInterval(() => setSeconds(seconds => seconds + 1), 1000);

Otro ejemplo:

Cuando actualizamos un estado utilizando la función setTimeout de Javascript:

const [stateValue, setStateValue] = useState(0);

const recursiveFunction = () => {
    setTimeout(() => {
        setStateValue(stateValue + 1);
        console.log(stateValue);
        recursiveFunction();
    }, 1000);
}

Tendremos un problema. Y es que al hacer el log, veremos que el valor de stateValue no cambia.

Para resolver este problema tenemos dos opciones:

1. Una sería pasarle una función al método setStateValue cuyo primer parámetro será el valor actual del estado. Dentro de esa función, stateValue tendrá el valor correcto.

const recursiveFunction = () => {
    setTimeout(() => {
        setStateValue(stateValue => {
            //Aquí vendría el código que utiliza stateValue
            return stateValue + 1;
        });
        recursiveFunction();
    }, 1000);
}

2. La otra forma, sería utilizando useEffect (el useEffect lo veremos más adelante en este curso):

const recursiveFunction = () => {
    setTimeout(() => {
        setStateValue(stateValue => stateValue+1);
        recursiveFunction();
    }, 1000);
}

useEffect(() => {
    //Aquí vendría el código que utiliza stateValue
}, [stateValue]);