Estoy trabajando en un proyecto en el que nos gustaría ejecutar varias búsquedas en paralelo con una API muy lenta. Idealmente, nos gustaría llenar nuestra interfaz para el usuario a medida que se reciben estos datos y hacerlo de manera sumativa. Estas solicitudes pueden o no resolverse en el orden en que se realizaron las llamadas a la API.
La mayoría de los casos de uso de Promise.all con setState implican establecer el estado después de que se hayan resuelto todas las promesas. Sin embargo, lo que busco hacer exige establecer el estado como un efecto secundario dentro de las propias promesas del niño, creo.
Así que esto es (simplificado) lo que estoy haciendo para lograr esto:
const request = async (setState, endpoint) => { const response = await fetch(endpoint); const data = response.json(); setState(state => ({ ...state, ...data })) } // Called within React component as a side effect const fetchAllData = (setState) => { Promise.all( [ request(setState, url_1), request(setState, url_2), request(setState, url_3) ] ) }Ahora, estoy realizando algunas pruebas y esto parece funcionar . Creo que no debería estar en condiciones de carrera con el estado porque a setState se le está pasando una función. Sin embargo, me pregunto si estoy haciendo algo peligroso con respecto a React, actualizar el estado y renderizar.
¿Hay algo malo con esta imagen?
No hay nada de malo en actualizar inmediatamente el estado de cada promesa individual; esto funcionará bien. Es posible que tenga una condición de carrera si cada solicitud intenta actualizar el mismo bit de datos, pero siempre que escriban diferentes partes de su estado, debería estar bien (aunque el patrón de devolución de llamada del actualizador de estado es necesario).
Lo único que está mal con su código es que falta el manejo de errores, y que Promise.all actualmente es un poco superfluo.