useEffect() infinitely runs for some reason

Question

So I'm currently trying to learn react and as practice I was just trying to build a hacker news site using the hacker new API. But, I ran into a issue. For some reason it is currently infinitely looping. I debugged it and found that it has something to do with the useEffect() hook. I tried the solution in this post but it didn't seam to work(I think I probably did it wrong though).

My Code:

const [maindata, setmaindata] = useState("");

  
  useEffect(() => {
    axios
      .get("https://hacker-news.firebaseio.com/v0/user/jl.json?print=pretty")
      .then((repo) => {
        const output = [];

        // repo.data["submitted"].length
        for (let x = 0; x < 30; x++) {
          axios
            .get(
              "https://hacker-news.firebaseio.com/v0/item/" +
                repo.data["submitted"][x] +
                ".json?print=pretty"
            )
            .then((titledata) => {
              //console.log(titledata.data["text"]);
              output.push(titledata.data["text"]);
            });
        }
      });
    setmaindata(output);
  });

I also tried replacing:

        }
      });
    setmaindata(output);
  });

With:

        }
      });
  }, [output});

But that didn't seem to work

The answer you linked to is correct, just make sure you place it in the right spot i.e. after the function you pass to useEffect, as the second parameter to useEffect: change `});` to `}, []);` — cbr, Jan 14 '21 at 18:29

score 4 · Accepted Answer · answered Jan 14 '21 at 18:33

4

If you don't pass the dependency array to useEffect, useEffect runs on every render.

By pass empty array([]) as dependency, useEffect runs once when component is mounted. Ex:

useEffect(() => {
... // your code
}, [])

answered Jan 14 '21 at 18:33

ecoplaneteer

1,918
1
8
29

score 1 · Answer 2 · answered Jan 14 '21 at 18:39

You should add dependency to useEffect because if you don't add any dependency, this method infinitely runs.

Just implement at the end of method [].

In addition, take care with setMainData because you call it outside of axis request.

Final code could be this:

const [maindata, setmaindata] = useState("");

  
  useEffect(() => {
    axios
      .get("https://hacker-news.firebaseio.com/v0/user/jl.json?print=pretty")
      .then((repo) => {
        const output = [];

        // repo.data["submitted"].length
        for (let x = 0; x < 30; x++) {
          axios
            .get(
              "https://hacker-news.firebaseio.com/v0/item/" +
                repo.data["submitted"][x] +
                ".json?print=pretty"
            )
            .then((titledata) => {
              //console.log(titledata.data["text"]);
              output.push(titledata.data["text"]);
              // here you have output array with the push action that you did in previous line
              setmaindata(output);
            });
        }
      });
    
  }, [dependency]);

Change dependency with your variable that you want to use when this value changes this useEffect will be called

useEffect() infinitely runs for some reason

2 Answers2