Estoy aprendiendo a reaccionar nativo y estoy usando react hooks ahora. Estoy feliz por eso, pero estoy luchando un poco con la limpieza de useEffect. Lo que obtengo es que lo uso para limpiar el componente. Por ejemplo, puedo restablecer un temporizador. ¿Pero también usaría una limpieza para una matriz de datos?

Por ejemplo, estoy recuperando datos en useEffect y luego, cuando desmonto, ¿restablezco la matriz de datos a nulo? También veo muchas veces (en algún ejemplo) el useEffect así:

useEffect(() => {
doSomething, fetchData;

return => { console.log("clean up")}
},[]);

Dado que esto es solo un console.log, ¿estoy en lo cierto, que nada está sucediendo aquí y esto es solo un marcador de posición en el ejemplo?

¡Muchas gracias!

0
Sylber 10 jun. 2020 a las 22:47

2 respuestas

La función de limpieza consiste en limpiar cualquier suscripción en ejecución, escuchas de eventos, temporizadores, conexiones abiertas de socket web que aún se pueden ejecutar incluso después de que el componente se desmonte.

Por ejemplo,

useEffect(() => {
  setInterval(() => {console.log("hello")},1000)
}, [])

En el caso anterior, console.log 'hola' en un intervalo de 1s. Si no proporcionamos una función de limpieza para borrar el intervalo, el intervalo se estaría ejecutando incluso después de que el componente se desmonte, causando pérdidas de memoria en la aplicación. Lo mismo puede suceder con temporizadores, conexiones de socket web abiertas.

Es por eso que la función de limpieza debe proporcionarse para cerrar cualquier tarea de larga ejecución o abrir recursos para cerrarlos cuando el componente se desmonta.

Para arreglar la situación del intervalo

useEffect(() => {
  let interval = setInterval(() => {console.log("hello")}, 1000)

  return () => {
    clearInterval(interval) // clear the interval in the returning function
  }
}, [])
0
subashMahapatra 10 jun. 2020 a las 20:39

Sí, useEffect devuelve la función que se llamará al desmontar el componente. Por lo tanto, este es el lugar adecuado para todas las operaciones de limpieza, cancelación de suscripción, liberación, etc.

0
vicacid 10 jun. 2020 a las 20:22