CODEWITHSUNDEEP
javascriptreactjs
MrPigbot
MrPigbot

Reputation: 37

useEffect() infinitely runs for some reason

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

Upvotes: 1

Views: 72

Answers (2)

Adrian
Adrian

Reputation: 945

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

Upvotes: 1

ecoplaneteer
ecoplaneteer

Reputation: 1984

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
}, [])

Upvotes: 4

Related Questions