I have this in my component:
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,
};
The idea is that the useEFfect runs every time that the history stack changes, but if it has already been run once, it should not run again. Hence the !filtersFetched in the first condition
How can I avoid that? Because every time I change the location (I'm replacing the url in other part of the app), filtersFetched is reset to false, and the whole fetch happens again.
Thats's happening because whenever you change the url, the component gets unmounted. And when you come back, it's a fresh component, which means filtersFetched state will be at its initial value. I assume you declared it like this:
const [filtersFetched, setFiltersFetched] = useState(false);
That's the normal behaviour in React. If it's really important for you that it shouldn't run on mount after url change, you could use localStorage to remember the value of filtersFetched. For that, change your useEffect to:
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]);
And set the initial value of filtersFetched like below instead of what you had before:
const initialFiltersFetchedValue = localStorage.getItem("filtersFetched")
? JSON.parse(localStorage.getItem("filtersFetched"))
: false;
const [filtersFetched, setFiltersFetched] = useState(initialFiltersFetchedValue);
And if you wanna take it further, you could implement a system of cashing your HTTP queries, with a library like React Query.