I'm building a project with vite + react app. I fetched data in useEffect() and got the following error in console: GET .php?amount=5&category=9&difficulty=medium&type=multiple 429 (Too Many Requests)

Here's my code :

import React,{useState,useEffect} from 'react'

function QuizMain() {
    const[data,setData] = useState()
    useEffect(()=> {
        fetch(".php?amount=5&category=9&difficulty=medium&type=multiple")
        .then((res)=> res.json())
        .then((data)=>console.log(data))
    },[])
  return (
    <div >...</div>
  )
}

I set the second argument in useEffect(function,[]), why is it fetching multiple times? How to I fix it? I'm a newbie!

I am expecting to fetch data only one time on render and update the state.

I'm building a project with vite + react app. I fetched data in useEffect() and got the following error in console: GET https://opentdb./api.php?amount=5&category=9&difficulty=medium&type=multiple 429 (Too Many Requests)

Here's my code :

import React,{useState,useEffect} from 'react'

function QuizMain() {
    const[data,setData] = useState()
    useEffect(()=> {
        fetch("https://opentdb./api.php?amount=5&category=9&difficulty=medium&type=multiple")
        .then((res)=> res.json())
        .then((data)=>console.log(data))
    },[])
  return (
    <div >...</div>
  )
}

I set the second argument in useEffect(function,[]), why is it fetching multiple times? How to I fix it? I'm a newbie!

I am expecting to fetch data only one time on render and update the state.

• javascript
• reactjs
• react-hooks
• fetch-api

Share Improve this question Follow asked Nov 25, 2023 at 14:22 Samiul IslamSamiul Islam 4111 silver badge77 bronze badges 4

• 1 If your code was fetching multiple times it would show that in the console (which I'm guessing it isn't?) My guess is that (because it's a free open API) a lot of people are hammering it at the same which is why the API server is having an issue. It's not an error specifically for you - it's an error for everyone using the service. I don't see an issue with your code per se. – Andy Commented Nov 25, 2023 at 14:28
• 1 A 429 (Too Many Requests) normally tells you that you hit the rate limit for the allowed request for a given time span. – t.niese Commented Nov 25, 2023 at 14:30
• yeah that could be, I fetched data the same way in another project and I got no error there. @Andy – Samiul Islam Commented Nov 25, 2023 at 14:32
• @Andy A 429 (Too Many Requests) is normally - if used correctly - a per user/ip/token based response. If the server can't keep up in general you more likely get a 503, 504 or 408 (or maybe also a 500 or 502). – t.niese Commented Nov 25, 2023 at 14:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Let's test our API first. Open your API URL separately in a browser tab and check whether the JSON response is returned. Refresh the API multiple times and see the results are consistent. If not, the API is having some issue responding to request back to back or designed in a way to return the response after a configured wait time.

In order to prevent react app from rendering its ponents twice is to take out the StrictMode from your root ponent. The code is just fine.

Firstly, React will render your ponents twice in development mode, see this article for more on that https://react.dev/reference/react/StrictMode

Second, you're not actually setting the state to the fetched data.

import React,{useState,useEffect} from 'react'

function QuizMain() {
    const[data,setData] = useState()
    useEffect(()=> {
      (async () => {
        const response = await fetch("https://opentdb./api.php?amount=5&category=9&difficulty=medium&type=multiple");
        // Check status codes and whatnot here and handle accordingly
        const data = await response.json();
        console.log(data);
        setData(data);
      })();
    },[])
  return (
    <div >...</div>
  )
}

If you're still seeing multiple renders/fetches you'll have to look in the parent ponents to see if something might be triggering new renders.