useState not updating for some reason?

Question

when I try to get some data from my backend API using axios, and set the state after I've gotten the result for some reason the state is not updated and when I try to use the state it will only show me an empty array. but what's so interesting is that when I console.log(res.data) it will show me my array of lists with no problem, so I guess the problem is with the setCategories() state function. What am I doing wrong?

const Home = (props) => {
  const [categories, setCategories] = useState([]);
  useEffect(() => {
    getCats();
  }, []);

  const getCats = async () => {
    const data = await axios.get(`${myUrl}/allItems`, {
      withCredentials: true,
    });
    const cats = await data.data;
    console.log(cats); //this one works perfectly
    setCategories(cats);
    console.log(categories) //this one doesn'nt work which means the setState didn't work
  };


  return (
    <>
      <div className="card-div mt-5">
        {categories.map((cat) => {
          <li>{cat.name}</li>;
        })}
      </div>
    </>
  );
};

Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — cbr, Jan 07 '21 at 11:40
You just set the categories to cats `setCategories(cats)` but then log the [stale closure](https://dmitripavlutin.com/react-hooks-stale-closures/) categories: `console.log(categories)` why not just log cats instead: `console.log(cats)` — HMR, Jan 07 '21 at 12:09
the log is not important to me, what's important is I want to render the ```categories``` list to the DOM but when I use the ```map()``` function it doesn't do anything because it is undefined at that time — LeonSnipez, Jan 07 '21 at 12:11

Ketan Ramteke · Accepted Answer · 2021-01-07T12:08:48.730

1

the state is set asynchronously, so the data is not updated instantly. that's why you are not getting the output on console.log(categories) right after setCategories(cats);

here is a small example of asynchronous behaviour of useState state update:

Link to working example: stackblitz

import React, { useEffect, useState } from "react";
import "./style.css";
import axios from "axios";
const url = "https://jsonplaceholder.typicode.com/users";
export default function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get(url).then(result => {
      console.log("1. when data is fetched sucessfully: ", result.data);
      setUsers(result.data);
      console.log("2. Just after setting state: ", users);
    });
  }, []);

  // secons useEffect for logging out upadated todos useState
  useEffect(() => {
    console.log("todos upadated: ", users);
  }, [users]);
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
      {users.map(user => (
        <p>{user.name}</p>
      ))}
    </div>
  );
}

Here is what is happening in the above example:

You can see the flow of data fetching and async update of state.

edited Jan 07 '21 at 12:08

answered Jan 07 '21 at 11:39

Ketan Ramteke

10,183
2
21
41

what changes would you suggest? – LeonSnipez Jan 07 '21 at 11:40
you can have another useEffect hook and set its dependency to ```categories``` and ```console.log there```. – Ketan Ramteke Jan 07 '21 at 11:45
but why I'm watching other people's tutorials they do it without putting it inside another useEffect? – LeonSnipez Jan 07 '21 at 11:54
here is the example: https://stackblitz.com/edit/react-pshb4v – Ketan Ramteke Jan 07 '21 at 12:00
and how can I render the array to the DOM?, when I try to map ```categories``` categories is ```undefined``` at that time, what can I do now? – LeonSnipez Jan 07 '21 at 12:07
use a simple map function to render it. – Ketan Ramteke Jan 07 '21 at 12:09
I use it but it shows nothing because categories is ```undefined``` – LeonSnipez Jan 07 '21 at 12:12
what are you getting from server request? – Ketan Ramteke Jan 07 '21 at 12:13
just a simple array of objects, but the problem is with the state, the setCategories is not set at that time so when I map it, it will be undefined at that time – LeonSnipez Jan 07 '21 at 12:15
1

the issue was in the mapping function when I mapped categories after the arrow function I put curly braces instead of a normal parenthesis, it works perfectly fine. thanks so much for your help and effort and time, you really helped me. – LeonSnipez Jan 07 '21 at 12:25

score 0 · Answer 2 · answered Jan 07 '21 at 11:46

0

The useState function is asynchronous, so you will never get the new state in the same function, the best way is to use it in another function or useEffect. Example:

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

answered Jan 07 '21 at 11:46

Mvrocha

393
3
14

useState not updating for some reason?

2 Answers2

Linked

Related