En mi caso de uso, hay algunos componentes de entrada controlados que almacenan datos en estados. Cuando cambio una de las entradas desplegables, cambia 3 estados más y activa una llamada a la API. ¿Cómo puedo asegurarme de que los 3 estados estén actualizados antes de realizar la llamada a la API? Estoy usando el componente funcional de reacción.
Opción 1
Si está utilizando React 18 y llama a esos 3 setState(...) dentro de la misma función, se garantiza que esos estados se actualizarán en el próximo renderizado gracias al procesamiento por lotes automático .
Entonces, en este caso, puede usar un useEffect en cualquiera de estos 3 estados y llamar a la API en ese sentido. Consulte este sandbox para ver un ejemplo simple.
opcion 2
Para las personas que usan React 17 o una versión anterior, aún tiene el procesamiento por lotes automático, pero solo dentro de los controladores de eventos de React (consulte esta increíble respuesta ). Si está actualizando estados fuera de los controladores de eventos React, la forma más fácil es, en lugar de useState tres veces, simplemente coloque esos estados en un solo estado en primer lugar para asegurarse de que se actualizarán al mismo tiempo, porque son en el mismo estado.
Por ejemplo:
const [state, setState] = useState({ state0: 0, state1: 'a', state2: true, }) useEffect(() => { // Call API here }, [state])