Copying an array from React Hook

Question

I'm using the useState hook to populate items in an array.

const [meals, setMeals] = useState([]);
useEffect(async () =>{
    const mealsData = await fetchMeals(localStorage.getItem('user_id'));
    console.log(mealsData);// Array(3)
    setMeals([...meals, mealsData]);
    console.log(meals);//[]
 }, []);

The array doesn't get copies in my setMeals method, what am I doing wrong here?

Akshit Mehra · Answer 1 · 2019-12-29T20:55:37.547

3

This is because

setMeals([...meals, mealsData]);

is an asynchronous call and you are logging the meals before being sure the state actually updated

console.log(meals);

You should call and check your console.log() function in another useEffect() call which runs on every state change and assures that the state actually changed

useEffect(() => {
    console.log(meals);
 }, [meals]);

[meals] passed as the second argument will let this useEffect() run every time meals (actually) update.

edited Dec 29 '19 at 20:55

answered Dec 29 '19 at 20:46

Akshit Mehra

747
5
17

What's the solution? – Melissa Stewart Dec 29 '19 at 20:47
1

I edited and added the solution. Let me know if that works... – Akshit Mehra Dec 29 '19 at 20:48

score 0 · Answer 2 · answered Dec 29 '19 at 20:48

0

the update is asynchronous, the new value is not available immediately as you're expecting. You can find an in-depth explanation here: useState set method not reflecting change immediately

answered Dec 29 '19 at 20:48

G Gallegos

609
6
11

score 0 · Answer 3 · answered Dec 29 '19 at 20:52

UseEffect cannot be async you should wrap it in an async function

function useMeals() {
   const [meals, setMeals] = useState([]);
    useEffect(() => {
      async function setFetchedMeals() {
        const mealsData = await fetchMeals(localStorage.getItem('user_id'));
        setMeals([...meals, mealsData]);
      }
      setFetchedMeals();
    }, []); // letting the dependency array empty will run the effect only once

  console.log(meals)
  return meals;
}

score 0 · Answer 4 · answered Dec 29 '19 at 20:54

You are actually not doing anything wrong, state updates are not synchronous, so logging meals immediately after updating it will not show the updated value

Use an effect for the meals array to detect when it has actually changed...

useEffect(() => {
    console.log(meals);
}, [meals]);

Copying an array from React Hook

4 Answers4