reactjs - state not updating in react hooks

Question

i have created a login form where user need to input his email id and OTP. below is my code -

import { useState } from 'react';
import axios from '../api/axios';

const useLogin = () => {
    const [user, setUser] = useState(false);

    const auth = async (value, OTP) => {

        let config = {
            method: 'POST',
            url: '/api/user/generateToken',
            headers: {
                Authorization: 'value'
            },
            data: {
                username: value,
                password: OTP
            }
        };

        try {
            const response = await axios(config);
            if (response.data.Status === "Failure") {
                throw response.data.Message;
            } else {
                setUser(true);
                return { status: response.data.Status, isAuth: user }
            }
        } catch (err) {
            setUser(false);
            return { status: undefined, message: err, isAuth: user };
        }

    }

    return { auth, user };


}

export default useLogin

Answer 1

That's because by the time you returning your isAuth value the new user value is not set yet. you need to know that React setState is asynchronous function. just use the the boolean itself directly like this:

setUser(true);
return { status: response.data.Status, isAuth: true }

or in case of a rejection:

setUser(false);
return { status: undefined, message: err, isAuth: false };