Considere un oyente de devolución de llamada de botón en los componentes funcionales de React definidos a continuación:
Aquí está el enlace de codesandbox para reproducir esto.
const [setCtr, ctr] = useState(0); const btnClicked = () => { console.log("button callback"); setCtr((x) => { console.log("setCtr executed..."); return x + 1; }); console.log("button callback ends"); }; Cuando hago clic en el botón, la primera vez, setCtr ejecuta de forma síncrona, pero después de eso siempre (lo intenté 20 veces) se ejecuta de forma asíncrona.
Aquí está el resultado del primer clic en el botón
button callback setCtr executed... button callback endsAquí está el resultado de los clics de botón subsiguientes
button callback button callback ends setCtr executed... button callback button callback ends setCtr executed... button callback button callback ends setCtr executed... button callback button callback ends setCtr executed... Esto es confuso. ¿Cómo funciona exactamente la función set en useState ? Si fuera realmente una función asíncrona, siempre deberíamos hacer que la button callback ends antes setCtr executed... .
Esto me hace pensar que a veces se comporta como una función síncrona, mientras que otras veces como una función asíncrona.
Esta declaración no es del todo cierta: si fuera realmente una función asíncrona, siempre deberíamos hacer que la devolución de llamada del botón finalice antes de que se ejecute setCtr.... React 18 procesa por lotes todos los setStates, pero también tiene una cola de prioridad para cada instrucción que escribe dentro de los controladores , síncrono o asíncrono, por lo que no debe confiar en que la devolución de llamada de setState suceda antes o después de otra cosa, a menos que le diga explícitamente a React que lo ejecute de forma síncrona:
function App() { const [ctr, setCtr] = React.useState(0); const btnClicked = () => { console.log("button callback", ctr); ReactDOM.flushSync(() => setCtr((x) => { console.log("setCtr executed...",x); return x + 1; }) ); console.log("button callback ends", ctr); }; console.log("RERENDERING X:", ctr) return ( <div className="App"> {ctr} <br /> <button onClick={btnClicked}>Add</button> </div> ); } ReactDOM.render(<App/>, root) <div id="root"></div> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> React, especialmente React 18, aplica algunas optimizaciones de código pesadas, así que no crea que solo ejecuta el código que escribe dentro de los controladores "tal cual". Como puede ver, el uso de flushSync le dice explícitamente a React que elimine todos los setStates inmediatamente cuando se invoca, por lo que detiene todo el código síncrono dentro del controlador, vuelve a renderizar el componente y luego sigue ejecutando el resto del código. Puede notar que el estado del último log es obsoleto cuando se ejecuta y se refiere al valor anterior, ya que la instrucción se memorizó en el valor del estado en el momento en que lo declaró. Esa es otra característica importante de React. Es por eso que siempre debe confiar en Hooks como useEffect o useMemo con las dependencias que le interesa rastrear, para realizar operaciones después de que se actualice el estado.
Referencia: https://reactjs.org/docs/react-dom.html#flushsync