Estoy haciendo un temporizador en un juego de Tenzie. Cuando un usuario hace clic en un botón, la función onClick establece el estado isTimerActive en verdadero , que inicialmente era falso y el estado tenzie también es falso por defecto y cuando el usuario completa el juego, el estado tenzie se establece en verdadero .
React.useEffect(() => { let timer = null; if(isTimerActive && !tenzie){ timer = setInterval(() => { setTime(prevSecond => prevSecond + 1); }, 1000); } return () => { clearInterval(timer); } }, [tenzie, isTimerActive])Quiero saber cuándo React ejecuta esta función de limpieza y si la ejecuta cada vez que ejecuta useEffect, ¿por qué funciona mi temporizador?
Aquí la respuesta simple es la función de limpieza de useEffect que se ejecuta solo cuando el componente se desmonta, nunca se ejecuta cada devolución de llamada de useEffect, solo se ejecuta si su componente se desmonta.
Documentos de referencia: https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect
Es bueno tener una función de limpieza para estos escenarios (ya que está usando setInterval) porque no desea que setInterval llame incluso después de que su componente se desmonte. Por lo tanto, es mejor borrar el intervalo en la función de limpieza antes de desmontar el componente.