Infinite loop on componentdidupdate with useEffect

1
votes

I'm using redux and trying to fetch data when my component did update. I'm using useEffect hook to track posts update and getting the state with useSelector. I'm having issues as the component is making infinite fetching requests instead of a single request. Anyone knows how I can stop it from making infinite requests and make a single request if posts updated?

my code:

 const posts = useSelector((state) => state.posts.posts);

 useEffect(() => {
    dispatch(getPosts(page));
 }, [posts]);

image showing infinite fetching requests being made

2
reactjsreact-reduxuse-effect
Duplicate stackoverflow.com/questions/53070970/infinite-loop-in-useeffect. Either take out the [posts] dependency and replace with [ ] or add an "if" statement inside the useEffect to ensure it only dispatches for a certain condition – Doug Hill
Hey, maybe you meant to listen to changes to the page variable instead? Currently your useEffect hook runs on every change to the posts variable, which should cause the infinite loop. – tommy
Does this answer your question? Infinite loop in useEffect – Adrian Mole

2 Answers

0
votes
const posts = useSelector((state) => state.posts.posts);

 useEffect(() => {
    dispatch(getPosts(page));
 }, []);

const updateNeeded = useSelector((state) => state.posts.updateNeeded);

 useEffect(() => {
  if (updateNeeded) {
    dispatch(getPosts(page));
  }
 }, [updateNeeded]);

Change updateNeeded to true by a dispatch action when you want to fetch a new update, and when the update is fetched dispatch an action which will make this flag to false again.

0
votes

From useEffect documentation

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

So, dispatch(getPosts(page)) will be called on component mount as well when any of the dependency provided get changed, this will make an API request and fetch the posts of this page. Which will eventually update the state.posts.posts once the API is successful. As, the same state.posts.posts is given as dependency to the useEffect hook this will trigger the function to get executed again and the cycle goes on.

enter image description here

For example if you want to make the API call and fetch new posts when there's a change in the page you should provide page as dependency instead of posts as shown below

const posts = useSelector((state) => state.posts.posts);

 useEffect(() => {
    dispatch(getPosts(page));
 }, [page]);