Encontré que, si:

1. hay dos setState
2. el primero se llama con un valor obtenido de await
3. los dos se llaman en el mismo hilo

entonces, hay un marco donde se establece un estado pero el otro no.

Ejemplo:

 const [bool1, setBool1] = useState(false) const [bool2, setBool2] = useState(false) useEffect(() => { (async () => { const _bool1 = await true setBool1(_bool1) const _bool2 = true setBool2(_bool2) })() }, []) console.log(`bool1: ${bool1}, bool2: ${bool2}`)

Ejemplo en vivo (abrir la consola del navegador para la salida):

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script> <script type="text/babel"> const {useState, useEffect} = React; const App = () => { const [bool1, setBool1] = useState(false) const [bool2, setBool2] = useState(false) useEffect(() => { (async () => { const _bool1 = await true; setBool1(_bool1); const _bool2 = true; setBool2(_bool2); })(); }, []) console.log(`bool1: ${bool1}, bool2: ${bool2}`); return <p>See browser console for output</p>; } ReactDOM.render(<App />, document.body); </script>

La salida es:

 bool1: false, bool2: false bool1: true, bool2: false bool1: true, bool2: true

Aquí, la segunda línea es confusa: creo que no debería haber un marco en el que bool1 y bool2 no tengan el mismo valor. Sé el hecho de que setState no establece un valor en el mismo marco en general, pero ¿ese hecho está realmente relacionado en este caso?

Más confuso, si 1. no se cumple, es decir, si elimino await for setBool1 , la segunda línea desaparece. No entiendo cómo await rompe la sincronización entre setBool1 y setBool2 en este caso, porque creo que la promesa ya está resuelta cuando se llama a setBool1 , por lo que no debería hacer una diferencia.