React state not updating after async await call

Question

I am using React Hooks and the useEffect to get data from an API. I need to make 2 consecutive calls. If I console.log the response directly, it shows the correct response, but when I console.log the state, its empty and its not updating. What am I doing wrong?

const [describeFields, setDescribeFields] = useState([]);

useEffect(() => {
const fetchData = async () => {
  await axios
    .all([
      axios.get("someUrl"),
      axios.get("someotherUrl")
    ])
    .then(
      axios.spread((result1, result2) => {
        console.log(result1.data.result.fields); //shows correct response
        setDescribeFields(result1.data.result.fields);
        console.log(describeFields);  //shows empty array      
      })
    );
};
fetchData();
}, []);

Possible duplicate of [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) — Emile Bergeron, Aug 01 '19 at 15:21
Note that there are [plans to remove `axios.all` and `axios.spread`](https://github.com/axios/axios/issues/1042) since it's just replacing `Promise.all` and the spread operator. — Emile Bergeron, Aug 01 '19 at 15:26
Also, the `async/await` is useless here since you're already using promises. — Emile Bergeron, Aug 01 '19 at 15:28
`useEffect(() => { Promise.all([axios.get(), axios.get()]).then(/**/); }, []);` — Emile Bergeron, Aug 01 '19 at 15:35

Shubham Verma · Accepted Answer · 2019-08-01T15:21:04.980

It will not be displayed just after that if you want to see latest changes just console log before return statement as setState is async your console.log run before then setState

const [describeFields, setDescribeFields] = useState([]);

useEffect(() => {
const fetchData = async () => {
  await axios
    .all([
      axios.get("someUrl")
      axios.get("someotherUrl")
    ])
    .then(
      axios.spread((result1, result2) => {
        console.log(result1.data.result.fields); //shows correct response
        setDescribeFields(result1.data.result.fields);
      })
    );
};
fetchData();
}, []);

console.log(describeFields); //Check here
return(

)

Note : [] array in useEffect means it will run only one time. If you want to update as long as variable changes then add it as dependency.

Here is working example : https://codesandbox.io/s/prod-thunder-et83o

yep, that was it, thanks. ill choose it as a solution 5 mins later. Problem was that i had a mistake on displaying the data and i was thinking its not updating at all — Besart Marku, Aug 01 '19 at 15:21
Its common mistake and can be done by anyone. Happy coding :-) — Shubham Verma, Aug 01 '19 at 15:39

React state not updating after async await call

1 Answers1