I'm trying to increment value of React state setMoviesPage by 1 each time handleScroll() is called.
The issue I'm facing is that the state setMoviesPage is updated only the component is re-rendered (by navigating to a different url and coming back).
This is my code:
const [moviesPage, setMoviesPage] = useState(1);
async function handleScroll() {
if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight) return;
await setIsFetching(true);
setMoviesPage(moviesPage + 1);
}
useEffect(() => {
if (!isFetching) return;
fetchMovies(String(moviesPage))
.then(prevState => updateMovies([...prevState]))
.catch(() => updateMovies([]));
setIsFetching(false);
}, [isFetching, setIsFetching, moviesPage, updateMovies]);
How to fix it? Thanks
When first looked up your code, what I really want to tell you is your useEffect seems not on best practice used.
Here I modify it for you with better structure.
const fetchMovie = () => {
setIsFetching(true)
fetchMovies(String(moviesPage))
.then(prevState => updateMovies([...prevState]))
.catch(() => updateMovies([]));
setIsFetching(false)
}
useEffect(() => {
fetchMovie
}, [moviesPage]);
And please note that you only need add the dependencies array to useEffect all the value changed that will trigger your action inside it. Also sometimes linter can give you some false positive warning.
Hope this answer can help you solve your problem.
It seems that when fetching movies is complete you simply overwrite the existing state.
fetchMovies(String(moviesPage))
.then(prevState => updateMovies([...prevState])) // <-- overwrite state
.catch(() => updateMovies([]));
With function components and the useState hook, state updates are not merged in with existing state, you must manage this manually.
Note
Unlike the
setStatemethod found in class components,useStatedoes not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:const [state, setState] = useState({}); setState(prevState => { // Object.assign would also work return {...prevState, ...updatedValues}; });
Update the moviesPage value in the scroll handler
function handleScroll() {
if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight) return;
setMoviesPage(moviesPage + 1);
}
Factor out the fetching logic into a utility function. Use a functional state update to update from the previous state, appending the new data to a new array reference. Move the resetting of the loading state into the Promise chain so it's correctly reset at the end of the chain, otherwise it would just cancel out the starting loading true update.
const fetchNextMoviesPage = (page) => {
if (!isFetching) {
setIsFetching(true); // <-- start loading
fetchMovies(String(page))
.then(nextPage => {
updateMovies(movies => movies.concat(nextPage)); // <-- append next page
})
.catch(() => updateMovies([]))
.finally(() => setIsFetching(false)); // <-- end loading
}
};
useEffect(() => {
fetchNextMoviesPage(moviesPage);
}, [moviesPage]);