No response from Fetch API in React useEffect hook

Question

I am trying to use the fetch API in React useEffect hook to make a get request but I am not able to Print my response as expected. I am only getting an empty array as the response.

This is my code.

function App() {
  const [eventData,setEventData] = useState([]);
  const [loading,setLoading] = useState(false);

  useEffect(()=>{
    const fetchData = async()=>{
      setLoading(true);
      const res = await fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events');
      const {events} = await res.json();
      setEventData(events);
      setLoading(false);
    }

    fetchData();
    console.log(eventData)
  },[])
return (
    <div> 
      {{!loading ? <Map eventData={eventData}/> : <Loader/>}}
    </div>
  );
}
  
export default App;

this is my output

But if write the console.log statement after the useEffect hook I am getting the expected output. I don't understand why it's behaving in this way. It would be much appreciated if someone can explain the reason for this. Thanks in Advance.

That's because the state is updated asynchronously and fetch is also async. — Ramesh Reddy
– Ramesh Reddy, Commented Dec 19, 2020 at 19:11

VersifiXion · Accepted Answer · 2020-12-19 19:14:29Z

1

setState is asynchronous so you can't see the updated value in the function where you set a new value, where you console.log(eventData), you need to do console.log(events) to see what you get from the response

And, by the way, I recommend you to set loading at true by default because you do your request when the component mounts const [loading,setLoading] = useState(true);, then you can remove the setLoading(true); in the function

function App() {
  const [eventData,setEventData] = useState([]);
  const [loading,setLoading] = useState(true);

  useEffect(()=>{
    const fetchData = async()=>{
      const res = await fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events');
      const {events} = await res.json();
    console.log(events)
      setEventData(events);
      setLoading(false);
    }

    fetchData();
  },[])
return (
    <div> 
      {!loading ? <Map eventData={eventData}/> : <Loader/>}
    </div>
  );
}
  
export default App;

answered Dec 19, 2020 at 19:14

VersifiXion

2,2927 gold badges29 silver badges43 bronze badges

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

1 Comment

Niroshan_Krish Over a year ago

Now I understand it. And thanks for the tip. cheers!!!

Adebayo · Accepted Answer · 2020-12-19 19:10:48Z

1

The problem is that you're trying to get the value of eventData before the state is updated move console.log(eventData) outside useEffect like so

function App() {
  const [eventData,setEventData] = useState([]);
  const [loading,setLoading] = useState(false);

  useEffect(()=>{
    const fetchData = async()=>{
      setLoading(true);
      const res = await fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events');
      const {events} = await res.json();
      setEventData(events);
      setLoading(false);
    }

    fetchData();
  
  },[])

  console.log(eventData) //Here

return (
    <div> 
      {{!loading ? <Map eventData={eventData}/> : <Loader/>}}
    </div>
  );
}
  
export default App;

answered Dec 19, 2020 at 19:10

Adebayo

3234 silver badges13 bronze badges

1 Comment

Niroshan_Krish Over a year ago

Yeah I think that is because setState() is asynchronous. Thanks!

khan · Accepted Answer · 2023-04-16 14:29:47Z

0

`


function RecipesList() {

  

  //use effect to

  useEffect(() => {

    const getRecipesList = async () => {

      const response = await fetch("http://localhost:4000/recipe/allrecipes", {

        method: "GET",

      });

      const json = await response.json();

      if (response.ok) {

        setData(json);

        const allCategories = [

          "all",

          ...new Set(data.map((item) => item.category)),

        ];

        setCategories(allCategories);

      }

      

    };

    getRecipesList();

    //get all categories from data

  }, []);

  };

 

}

Want to populate categories array base on data array

Data array is populated from databse



`

answered Apr 16, 2023 at 14:29

khan

33 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

No response from Fetch API in React useEffect hook

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related