Digamos que tengo este código aquí:
const [a , setA] = useState(false); useEffect(() => { setA(true); setTimeout(()=>{ setA(false); },300); },[a]);Tengo dos preguntas:
1) ¿Esto creará un bucle infinito (si estoy usando ese mismo estado como dependencia)?
2) Si configuro el estado en medio del código useEffect, el componente se vuelve a procesar inmediatamente, entonces, ¿cuándo se ejecutará el resto del código si el componente se procesa antes de que lleguemos a él dentro del useEffect? ¿Cuándo sucederá el setA(false) ?
Si corrige la sintaxis ( setTimeOut debe escribirse correctamente), sí, eso provocará un bucle infinito.
const App = () => { console.log('rendering'); const [a , setA] = React.useState(false); React.useEffect(() => { setA(true); setTimeout(()=>{ setA(false); },300); },[a]); return 'foo'; }; ReactDOM.render(<App />, document.querySelector('.react')); <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>Si configuro el estado en medio del código useEffect, el componente se vuelve a procesar inmediatamente, entonces, ¿cuándo se ejecutará el resto del código si el componente se procesa antes de que lleguemos a él dentro del useEffect? ¿Cuándo sucederá el setA (falso)?
Ocurrirá tal como estaba programado originalmente: 300 milisegundos después de que se ejecute originalmente el gancho. Cuando el componente se vuelva a montar, no cancelará ni cambiará los tiempos de espera en curso que podrían haber creado los renderizados anteriores, a menos que haya escrito código específicamente para manejar esa posibilidad.
setA llamadosetTimeout , la devolución de llamada de tiempo de espera se ejecutará independientemente, exactamente a la hora programada, sin importar qué otro código haya, siempre que no llame a clearTimeout . Si establece el estado además de llamar a setTimeout , eso no tiene efecto en el tiempo de espera. (que es algo importante a tener en cuenta: los cierres obsoletos son un problema común con el que se encuentran las personas con React)Si configuro el estado en medio del código useEffect, el componente se vuelve a procesar inmediatamente, entonces, ¿cuándo se ejecutará el resto del código si el componente se procesa antes de que lleguemos a él dentro del useEffect? ¿Cuándo sucederá el setA (falso)?
No, no volverá a procesar el componente en medio de useEffect incluso si configura el estado. El enlace useState se ejecuta de forma asíncrona. Estará en cola.