Hola, estoy aprendiendo React ahora y tengo problemas con el estado.
Sé cuándo cambia el estado, el componente se vuelve a renderizar y el código en UseEffect sin profundidad solo se ejecuta una vez. Pero no puedo explicar exactamente por qué se produce una representación infinita cuando escribo setState en JSX o en la sintaxis de representación.
el siguiente código provoca una repetición infinita
import React, { useState, useEffect } from 'react' const index = () => { const [active, setActive] = useState(false); console.log("render", active); setActive(false); return ( <div> </div> ) } export default indexPero el siguiente código no tiene ningún problema aunque sigue llamando a setState.
import React, { useState, useEffect } from 'react' const index = () => { const [active, setActive] = useState(false); console.log("render", active); useEffect(() => { setInterval(()=>{ console.log("run") setActive(true) },0); }, []) return ( <div> </div> ) }¿setState activa la reproducción independientemente del valor del estado? Quiero saber la razón exacta por la que usar setState fuera de useEffect provoca un error.
Esto sucede porque, en el primer caso, cuando useEffect no se usa, está actualizando su estado justo después de declararlo. Incluso si está configurando el estado como falso nuevamente, pero para reaccionar, el estado se ha actualizado. Y la primera regla general para reaccionar es, si ocurre una actualización de estado, el componente se volverá a renderizar.
Es por eso que está obteniendo una reproducción infinita.
su código sigue el siguiente flujo:
En el segundo caso, cuando se usa el efecto de uso, su estado se actualizará solo cuando el componente esté montado, lo que significa que, después de eso, cualquier actualización de estado no activará su efecto de uso.
Basado en la documentación de React: https://reactjs.org/docs/hooks-reference.html#usestate
La función setState se utiliza para actualizar el estado. Acepta un nuevo valor de estado y pone en cola una nueva representación del componente.
Y hay una adición: https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update
Si actualiza un State Hook al mismo valor que el estado actual, React se rescatará sin renderizar a los niños ni disparar efectos. (React usa el algoritmo de comparación Object.is). Tenga en cuenta que es posible que React aún necesite renderizar ese componente específico nuevamente antes de rescatar.
Y aquí está la parte importante: es posible que React aún necesite renderizar ese componente específico nuevamente antes de rescatar .
Entonces, sí, el componente aún puede volver a generarse incluso si los valores son los mismos.