Estoy tratando de actualizar una matriz de datos que se carga de forma asíncrona desde una API (por ejemplo, el usuario hace clic en un elemento, solicita los datos y los agrega a la lista para que se muestre unos segundos más tarde).

Entiendo que el estado no se actualiza de inmediato, pero eso no es lo que está sucediendo, el estado se ha actualizado, pero el código después de esperar todavía ve el estado anterior .

Puedo ver items se han actualizado porque useEffect y genera la matriz actualizada, pero luego, cuando finaliza la await , el código async ve items en su estado original.

 const [items, setItems] = useState([]);

 useEffect(() => {
 console.log(`${items.length} items`);
 }, [items]);

 const addItemFromAPI = async () => {
 const name = await getNextItemFromAPI();
 // Why is items still referencing the previous copy from BEFORE await?
 console.log(`${items.length} existing items`);
 setItems([...items, { name }]);
 };

¿Estoy haciendo esto completamente mal? ¿Existe un patrón para la adición asíncrona de datos al estado?

Si lo cambio a useRef() y luego uso .current.push() , funciona como se esperaba, lo que me lleva a creer que algo extraño está sucediendo con useState .

https://codesandbox.io/embed/angry-worker-mczcsv?fontsize=14&hidenavigation=1&theme=dark