React Hooks state always one step behind [duplicate]

Question

I have various functions in React where I need to change the state with useState then do some action conditional on whether the new state meets some criteria.

This uses a setValues method in useState to set the value of newpassword when handleChange is called with prop="newpassword". The new password is then evaluated with a regex test, and if it is valid the state variable passwordIsValid should be set to true.

const handleChange = prop => event => {
    setValues({ ...values, [prop]: event.target.value })

    if (prop === 'newpassword' && passwordValidation.test(values.newpassword)) {
      setValues({ ...values, passwordisValid: true })
      console.log(prop, values.passwordisValid)
    } else {
      console.log(prop, values.passwordisValid)
    }
  }

The state is always one step behind tho - and I know this is because useState is async, but I don't know how to use useEffect to check the state? Very new to hooks, could someone help me out?

Answer 1

useState() hook is just a function call. It returns value and function pair. values is just a constant it doesn't have any property binding.

// Think of this line
const [values, setValues] = useState(0);

// As these two lines
const values = 0;
const setValues = someFunction;

When you call setValues react updates value for the next render. Next time component renders, it will call useState again which will return new values.

As a solution you should use event.target.value. You don't want to use it directly though because event.target is nullified after you observe it.

const newValue = event.target.value
// use newValue to setValues etc