Soy muy nuevo para reaccionar. Estoy experimentando con reaccionar y tratando de entender sus conceptos en este momento.
Tengo un componente que tiene dos estados, Nombre y habitación. Estoy usando setstate para establecer los valores de la habitación y el nombre, tengo 2 efectos de uso, el primero se ejecuta en el renderizado inicial y obtiene el nombre y el valor de la habitación. se supone que el segundo se renderiza tan pronto como cambie el nombre o la habitación
const Chat = ({location}) => { const [userName, setUserName] = useState(""); const [userRoom, setUserRoom] = useState(""); useEffect(() => { // console.log("initial use effect called") const {name,room} = queryString.parse(location.search) setUserName(name) setUserRoom(room) }, []) useEffect(()=>{ console.log('name or room changed') },[userName,userRoom]) return ( <div> component </div> ) }Como estoy configurando el nombre y la habitación uno tras otro, esperaba que el efecto del segundo uso se llamara tres veces
(primera vez en el renderizado inicial, segunda vez cuando cambia el nombre, tercera vez cuando cambia la habitación)
pero solo se llama dos veces. Además, si agrego un tiempo de espera en el efecto de uso inicial,
segundo efecto de uso recibe llamadas tres veces
const Chat = ({location}) => { const [userName, setUserName] = useState(""); const [userRoom, setUserRoom] = useState(""); useEffect(() => { // console.log("initial use effect called") const {name,room} = queryString.parse(location.search) setUserName(name) setTimeout(()=>{ setUserRoom(room) },0) }, []) useEffect(()=>{ console.log('name or room changed') },[userName,userRoom]) return ( <div> component </div> ) }React hace actualizaciones de estado en lotes. Lo que significa que, cuando configura el estado varias veces, actualizará ambos estados en una sola operación, lo que resultará en una repetición reducida (lo cual es bueno en la mayoría de los casos). Puedes aprender más sobre esto aquí .
Cuando se llama a setState varias veces en el controlador de eventos de React o en el método de ciclo de vida síncrono , se agrupará en una sola actualización. Es por eso que está obteniendo dos registros, el procesamiento inicial provoca el primer registro y setState provoca el segundo registro y cuando llamó a useState dentro setTimeOut , se registró como esperaba porque setTimeOut es una operación asíncrona y se comporta así con otras operaciones asíncronas como async/await, then/catch, fetch, etc. porque las actualizaciones de estado separadas no se procesarán por lotes en operaciones asincrónicas .