useEffect

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

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:

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)

React.StrictMode