React Useeffect() State Isn't Updated

when Im using the useEffect hook with the setState hook, the state isn't updated if I only want the useEffect to run once (i.e. pass an empty array as the second parameter). If i p

Solution 1:

Your state will get updated but the issue here is that you are checking for state updates by calling console.log(memes) directly after setMemes(data.data), but the state of a component is updated asynchronously which means setMemes is an asynchronous function.

If you want to do something with memes (except updating it) after it has been updated use another useEffect hook and define memes as its dependency.

The infinite loop is happening because you are defining memes as dependency of the useEffect and also updating memes inside the same effect. Therefore this useEffect is constantly triggering itself.

Solution 2:

You needlessly create an infinite loop by adding memes to the effect dependency, log it in the component function instead:

useEffect(() => {
  getMemes(currentPage).then((data) => {
    setEndPage(data.pagination.totalPages);
    setMemes(data.data);
    console.log('api data:',data);
  });
}, []);
console.log('memes:',memes);
console.log('end page:',endPage);

Solution 3:

It get stacked in infinite loop because the closure you passed to the function then set the state of memes, that trigger the useEffect hook, because it's listening the state of the property memes. You can pass currentPage in the array. Try using a loading state.