React useState not updating the states on submit form

Question

const [user, setuser] = useState({
    fName: '', lName: '', password: '', email: '', username: ''
})

const [fNameError, setfNameError] = useState('');
const [lNameError, setlNameError] = useState('');
const [emailError, setemailError] = useState('');
const [passwordError, setpasswordError] = useState('');
const [usernameError, setusernameError] = useState('');

const changeHandler = (e) => {
    setuser({
        ...user, [e.currentTarget.name]: e.currentTarget.value
    })
}

const inputChecker = () => {
    user.fName === '' || user.fName.length < 3 ? setfNameError('invalid') : setfNameError('valid');
    user.lName === '' || user.lName.length < 3 ? setlNameError('invalid') : setlNameError('valid');
    user.username === '' || user.username.length < 5 ? setusernameError('invalid') : setusernameError('valid');
    user.password === '' || user.password.length < 6 ? setpasswordError('invalid') : setpasswordError('valid');
    validateEmail(user.email) ? setemailError('valid') : setemailError('invalid');

    if (fNameError == 'valid' && lNameError == 'valid' && emailError == 'valid' && passwordError == 'valid' && usernameError == 'valid') {
        if (fNameError == 'valid') {
            return true
        }
        return false
    }

    const submitHandler = (e) => {
        e.preventDefault();

        //

On submitting the form and calling the submitHandler if all errors in the inputChecker function are valid I need inputChecker to return true but it returns false on first click even when all are valid but when i click it for the second time it return true and below check works

// Can someone tell me what I am doing wrong

        if (inputChecker()) {
            console.log(user);
        }

    }

Answer 1

Set state is async operation. You are setting the state and then checking its value which will always return you the old one. Thats the reason it returns true in the second time.

Refactor your code as below, and check again.

const inputChecker = () => {
let isFNameValid = true;
let isLNameValid = true;
let isUsernameValid = true;
let isPasswordValid = true;
let isEmailValid = true;

if(user.fName === '' || user.fName.length < 3) {
    setfNameError('invalid');
    isFNameValid = false;
}  
else {
    setfNameError('valid');
    isFNameValid = true;
}

if(user.lName === '' || user.lName.length < 3) {
    setlNameError('invalid');
    isLNameValid = false;
}  
else {
    setlNameError('valid');
    isLNameValid = true;
}

if(user.username === '' || user.username.length < 5) {    
    setusernameError('invalid');
    isUsernameValid = false;
}  
else {
    setusernameError('valid');
    isUsernameValid = true;
}

if(user.password === '' || user.password.length < 6) {    
    setpasswordError('invalid');
    isPasswordValid = false;
}  
else {
    setpasswordError('valid');
    isPasswordValid = true;
}


if(validateEmail(user.email)) {
    setemailError('valid');
    isEmailValid = true;
} 
else {
    setemailError('invalid');
    isEmailValid = false;
}


if (isFNameValid && isLNameValid && isUsernameValid && isPasswordValid && isEmailValid) {
        return true;
} else 
return false;
}