Experimenté diferentes comportamientos al llamar a varias funciones de conjunto de un enlace useState en funciones de sincronización y asíncronas.
function Test() { console.log('app rendering starts.'); const [a, setA] = useState(1); const [b, setB] = useState(11); const updateState = () => { console.log('\tupdating a starts.'); setA(2); console.log('\tupdating a ends.'); console.log('\tupdating b starts.'); setB(12); console.log('\tupdating b ends.'); }; console.log('app rendering ends.'); return ( <div className="App"> <div>a is {a}</div> <div>b is {b}</div> <button onClick={() => { console.log('--------------sync click--------------'); updateState(); }}>Update State a & b Sync</button> <button onClick={() => { console.log('--------------async click--------------'); setTimeout(updateState, 0) }}>Update State a & b Async</button> </div> ); } Ambos botones ejecutan el mismo código, pero de forma diferente.
Resultado del botón de sincronización:
app rendering starts. app rendering ends. --------------sync click-------------- updating a starts. updating a ends. updating b starts. updating b ends. app rendering starts. app rendering ends.Resultado del botón asíncrono:
app rendering starts. app rendering ends. --------------async click-------------- updating a starts. app rendering starts. app rendering ends. updating a ends. updating b starts. app rendering starts. app rendering ends. updating b ends. ¿Es este un comportamiento deseado?
¿Cómo puedo tener un resultado de sincronización en una función asíncrona?
No pude encontrar ningún consejo sobre esto en los documentos oficiales.
Cualquier ayuda sería apreciada.
¡Gracias!
Esto parece ser un hecho conocido según las discusiones de Github .
Uno de los comentarios, que creo que se explica bastante por sí mismo:
React actualmente realizará actualizaciones de estado por lotes si se activan desde un evento basado en React, como un clic de botón o un cambio de entrada. No realizará actualizaciones por lotes si se activan fuera de un controlador de eventos React, como setTimeout().
React usa internamente unstable_batchedUpdates() . Puede pasar una función de devolución de llamada y actualizaciones de estado dentro que se procesarán por lotes. Esto no sucede automáticamente para tiempos de espera, promesas y funciones asíncronas. Por lo tanto, se les llama desde fuera de la devolución de llamada y las actualizaciones de estado dentro de ellos no se procesan por lotes.
import { unstable_batchedUpdates } from "react-dom"; const updateState = () => { unstable_batchedUpdates(() => { console.log("\tupdating a starts."); setA(2); console.log("\tupdating a ends."); console.log("\tupdating b starts."); setB(12); console.log("\tupdating b ends."); }); };Puede usar una sola llamada de useState() o useReducer() para actualizar múltiples valores de estado almacenándolos juntos en lugar de almacenarlos en segmentos de estado separados.
const [values, setValues] = useState({a: 1, b: 11}); setValues({a: 2, b: 12});