Array in state not updating after useEffect runs in React

Question

I'm extremely new to React.js. I am trying to change a variable recepies which is in state using hooks. Below is my code snippet:

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {

const [recepies, setRecepies] = useState([]);

useEffect(()=>{getRecepies()}, []);

//const example = Some valid API URL


  const getRecepies = async () =>{
    const response = await fetch(example);
    const data = await response.json();

    //data.hits is an array of 10 objects
     setRecepies(data.hits);

     console.log(recepies);
    // prints nothing

  }

  return (  
    <div className="App">
    </div>
  );
}

export default App;

The problem is that setRecepies is NOT updating the recepies state. Why is that?data.hits is a valid array that has 10 objects that I'm fetching using an API.

Nicholas Tower · Accepted Answer · 2020-04-28 13:01:11Z

1

recepies is a local const. It will never change, and that's not what setRecepies is trying to do. Putting a log statement where you've put it can only ever log out what recepies was equal to when getRecepies was created.

The purposes of setRecepies is to tell react to rerender the component. When that second render happens, a new local const will be created which will get the new value. This variable is visible to anything created on that second render, not to things created on the first render. So if you want to see the new value, put your log statement in the body of the component so you can see what value it's rerendering with.

const [recepies, setRecepies] = useState([]);
console.log('rendering with', recepies);

answered Apr 28, 2020 at 13:01

Nicholas Tower

87.1k10 gold badges115 silver badges127 bronze badges

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

6 Comments

K Kimash Over a year ago

When I try to console.log(recepies) outside the getRecepies() function,it works but it logs the array twice! Why is that?

Nicholas Tower Over a year ago

Because the component renders twice. The first render has an empty array, then you fetch some data and set state, then you render again with that new data.

K Kimash Over a year ago

That makes sense, but in both cases, it logs the same array. It should've logged an empty array the first time, then another one with the info right?

Nicholas Tower Over a year ago

Yes, it should log an empty array, and then a populated array. Which array is it rendering twice?

K Kimash Over a year ago

Its showing the populated array in both the cases. I have called console.log(recepies) right after the ending of the getRecepies() function, before the return

|

Collectives™ on Stack Overflow

Array in state not updating after useEffect runs in React

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related