Infinite Loop caused when trying to fetch data and render it with React

Question

I'm having a problem fetching data and rendering it with React. It works fine when I am hitting an API that returns a single object but when I query a news API it just continues to run in an infinite loop even when I limit the amount of articles I want to return. I am saving the return data with useState and fetching it with useEffect. What am I doing wrong? Here is my code.

  const classes = useStyles();
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const getData = async () => {
      const url = 'https://gnews.io/api/v4/search?q=malware&lang=en&max=3&token=MY_API_TOKEN'
      const res = await fetch(url);
      const data = res.json();
      console.log(data);
      setData(data);
      setLoading(false);
    };
    getData();
  })
  
  
  return (
      <div className={classes.root}>
        <Grid 
        container
        direction="row"
        justifycontent="center"
        alignItems="center"
        spacing={8}
        >
          <Grid item xs={12}>
            <Paper className={classes.paper1}>
              <Typography variant="h5" className={classes.title}>
              "This book is dedicated to anyone and everyone who understands that
hacking and learning is a way to live your life, not a day job or 
semi-ordered list of instructions found in a thick book." -The Shellcoder's Handbook
              </Typography>
            </Paper>
          </Grid>
          <Grid container spacing={2}>
           <Grid item xs={4}>
           <Paper className={classes.paper2}>
              <h1>Title of news article</h1>
                <p>news story explination</p>
                <p>image</p>

            </Paper>
           </Grid>
           <Grid item xs={4}>
           <Paper className={classes.paper2}>
              <h1>Title of news article</h1>
                <p>news story explination</p>
                <p>image</p>

            </Paper>
           </Grid>
           <Grid item xs={4}>
           <Paper className={classes.paper2}>
              <h1>{data.title}</h1>
                <p>news story explination</p>
                <p>image</p>

            </Paper>
           </Grid>
          </Grid>
        </Grid>
      </div>
  )
};```

Viet · Accepted Answer · 2021-08-12 01:58:49Z

2

You need to add dependencies in your useEffect. If you want only call getData one time, you can add empty dependency [] like this

  useEffect(() => {
    const getData = async () => {
      const url = 'https://gnews.io/api/v4/search?q=malware&lang=en&max=3&token=MY_API_TOKEN'
      const res = await fetch(url);
      const data = res.json();
      console.log(data);
      setData(data);
      setLoading(false);
    };
    getData();
  }, [])

answered Aug 12, 2021 at 1:58

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Speciale Over a year ago

ahhhh gotcha. Thank you very much. Now I just have to wait a day until the API is not maxed out lol

Collectives™ on Stack Overflow

Infinite Loop caused when trying to fetch data and render it with React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related