Cannot setting the state with the data fetched in useEffect -React

Question

I want to send an API request in useEffect hook and setting the state variables value with the fetched data. I added 2 console.log for detecting the state variables value. I except the second log to be setted with the fetched data, however it still prints null.

Here is my code:

import { useEffect, useState } from "react";
import axios from "axios";
const Test = () =>{
    const [users, setUsers] = useState(null);
    useEffect(()=>{
        const getData = async ()=>{
            const resp = await axios.get("https://jsonplaceholder.typicode.com/todos");
            console.log(users);
            setUsers(resp.data);
            console.log(users);
        };
        getData();
    },[])
    return (
        <div>hello</div>
    )
};

export default Test;

Additionally the console output look likes this:

null
null

Answer 1

useState 's setter is asynchronous, therefore your second console.log will be called before the users is actually updated.

For it to work, just put it outside the useEffect .

import { useEffect, useState } from "react";
import axios from "axios";
const Test = () =>{
    const [users, setUsers] = useState(null);
    useEffect(()=>{
        const getData = async ()=>{
            const resp = await axios.get("https://jsonplaceholder.typicode.com/todos");
            console.log(users);
            setUsers(resp.data);
        };
        getData();
    },[])
    console.log(users);
    return (
        <div>hello</div>
    )
};

export default Test;

or in another dedicated useEffect , by passing users in the dependencies array.

import { useEffect, useState } from "react";
import axios from "axios";
const Test = () =>{
    const [users, setUsers] = useState(null);
    useEffect(()=>{
        const getData = async ()=>{
            const resp = await axios.get("https://jsonplaceholder.typicode.com/todos");
            console.log(users);
            setUsers(resp.data);
        };
        getData();
    },[])

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

    return (
        <div>hello</div>
    )
};