Tengo esto en mi componente:
const [filtersFetched, setFiltersFetched] = React.useState(false); useEffect(() => { if (history.location.search.includes("publisher_id=") && !filtersFetched) { fetchAllAxiosResponse < API.Publisher > (CatalogService.getPublishers, new URLSearchParams(), 1500) .then((data) => { setPublishers(data); setFiltersFetched(true); }) .catch((err) => { setFiltersFetched(true); }); } }, [filtersFetched, history.location]); const asyncFilters = { publisher_id: filtersFetched, }; La idea es que useEFfect se ejecute cada vez que cambie la pila del historial, pero si ya se ejecutó una vez, no debería volver a ejecutarse. Por lo tanto, la ! filtersFetched en la primera condición
¿Cómo puedo evitar eso? Porque cada vez que cambio la ubicación (reemplazo la url en otra parte de la aplicación), filtersFetched se restablece en false y la recuperación completa vuelve a ocurrir.
Eso sucede porque cada vez que cambia la URL, el componente se desmonta. Y cuando regrese, es un componente nuevo, lo que significa que el estado de filtersFetched tendrá su valor inicial. Supongo que lo declaraste así:
const [filtersFetched, setFiltersFetched] = useState(false); Ese es el comportamiento normal en React. Si es realmente importante para usted que no se ejecute en el montaje después del cambio de URL, puede usar localStorage para recordar el valor de filtersFetched . Para eso, cambia tu useEffect a:
useEffect(() => { if (history.location.search.includes("publisher_id=") && !filtersFetched) { fetchAllAxiosResponse < API.Publisher > (CatalogService.getPublishers, new URLSearchParams(), 1500) .then((data) => { setPublishers(data); }) .catch((err) => { console.log(err); }) .finally(() => { setFiltersFetched(true); localStorage.setItem("filtersFetched", JSON.stringify(true)); }); } }, [filtersFetched, history.location]); Y establezca el valor inicial de filtersFetched como a continuación en lugar de lo que tenía antes:
const initialFiltersFetchedValue = localStorage.getItem("filtersFetched") ? JSON.parse(localStorage.getItem("filtersFetched")) : false; const [filtersFetched, setFiltersFetched] = useState(initialFiltersFetchedValue);Y si quiere ir más allá, podría implementar un sistema de cobro de sus consultas HTTP, con una biblioteca como React Query .