Tengo este componente React
import React, {useEffect, useRef, useState} from 'react'; export default function MyD3(props) { const [count, setCount] = useState(0); useEffect(() => { console.log("first log") const interval = setInterval(() => { console.log('This will run every second!'); }, 1300); console.log("second log") return () => clearInterval(interval); },[]); return ( <div > <p>{count}</p> </div> ); }Me gustaría entender por qué el código dentro de setInterval sigue ejecutándose.
Cuando el componente se monta por primera vez, registra first log y second log
se imprimen en la consola del navegador, solo una vez.
Lo que me sorprende es que, sin embargo, el código useEffect no se repite, el
This will run every second!
sigue imprimiendo.
Lo que quiero saber es por qué, esperaba que tuviera un alcance solo para useEffect, de modo que dejar el código useEffect también interrumpiría la ejecución del intervalo.
No entiendo claramente cómo funciona la pila react/js.
El código useEffect se ejecutará en cada representación del componente de reacción que está creando. En este caso, como indicó [] como las dependencias de useEffect, su código se ejecutará en el primer renderizado. Dónde va a comenzar el intervalo.
Ese intervalo seguirá funcionando sin cesar hasta que se desmonte el componente. ¿Por qué? Porque la función () => clearInterval(interval); se conoce como la función de limpieza y solo se ejecutará cuando el componente esté, como se mencionó anteriormente, desmontado. Aquí hay un enlace a una explicación más detallada.
¿Y cuándo se desmonta un componente? Puede encontrar aquí un enlace a una pregunta en este mismo sitio que resuelve esta pregunta
¡espero que estés bien! Si entiendo correctamente, le gustaría que la función setInterval dejara de regresar. Sin embargo, está poniendo en usoEffect con esta configuración: useEffect(() => {}, []); Por lo tanto, todo lo que contiene se montará cada vez que se monte el componente, de forma similar a componentDidMount. Por lo que siempre se ejecutará al cargar el componente.