Estoy usando setInterval dentro de useEffect con una matriz de dependencia vacía dentro de uno de mis componentes de reacción. Hay un estado de uso verdadero/ useState que controla la visualización de ese componente. Cuando el estado es falso, el componente se oculta y cuando es verdadero, se muestra el componente.
Algo como esto:
const [state, setState] = useState(false) // in jsx render section return ( <div> {state? <component/> : '' } </div> ) Cuando el componente se carga por primera vez, setInterval se ejecuta solo una vez, que es lo que se supone que debe hacer.
Si el estado cambia a falso y luego vuelve a ser verdadero, el componente se elimina de la interfaz de usuario y luego se vuelve a mostrar. Sin embargo, lo que sucede aquí es que ahora tengo dos funciones setInterval ejecutándose en segundo plano y la primera no se apaga.
El número de funciones setInterval sigue aumentando cada vez que ese componente se vuelve a renderizar.
No entiendo cómo funciona React en esta situación.
Necesito saber cómo funciona (es decir, por qué no se apaga la función, por qué aumenta el número de funciones) y cómo solucionarlo.
Esta es la estructura de React useEffect. React realiza la limpieza cuando el componente se desmonta.
useEffect(() => { //effect return () => { //cleanup runs on unmount } }, [])La función de limpieza debe tener clearInterval() que básicamente eliminará setInterval o lo detendrá cuando se desmonte el componente. Vea el código práctico a continuación:
let intervalid; useEffect( () => { intervalid = setInterval(() => {console.log("Iterate");}, 1000)); return function cleanup() { console.log("cleaning up"); clearInterval(intervalid); }; }, [] );Este código anterior es solo para comprender el enfoque. Cada efecto puede devolver una función que limpia después de él. Esto nos permite mantener la lógica para agregar y eliminar suscripciones cerca unas de otras. # DE REACT DOCS Referencia