Tengo una determinada parte del estado que se actualiza a través de llamadas a la API. Tengo varios componentes que afectan este estado y me encuentro con un problema. Básicamente, el problema se reduce a cómo se establece el estado debido al tiempo que tarda en finalizar la llamada a la API.
Básicamente: el componente 1 se carga y useEffect se activa para actualizar el estado. El componente 2 se carga justo después y también tiene un useEffect que hace la misma llamada api para diferentes datos.
Si la llamada a la API en el Componente 1 tarda más que el Componente 2, el estado establecido del Componente 2 se sobrescribe con el estado establecido del Componente 1 una vez que finaliza su llamada a la API, incluso si el Componente 1 ya no está montado.
¿Hay alguna forma en los componentes funcionales de cancelar cualquier llamada a la API/configuración de estado cuando el componente está desmontado? Gracias.
Encontré la respuesta básica aquí en esta otra pregunta: Cancelar una llamada Axios REST en React Hooks useEffects cleanup failing
Básicamente, necesitaba que la función useEffect devolviera algo para que se limpiara. Es más fácil de explicar en código, así que lo pondré a continuación:
useEffect(() => { let unMounted = false; const onLoad = async () => { const data= await axios.get(); !unMounted && setData(data); }; onLoad(); return () => { unMounted = true; }; }, []);