如何正确组合 useState 和 useEffect

Question

I want to compare 2 inputs value. The typical password/repeat password input in a form.

Using onChange react useState render the DOM but not immediately because I shopuld use useEffect.

But I'm not sure how to combine both. I'm conscious there is other answers replying something similar but I can't apply to this case.

This is my useSstate :

 const [user, setUser] = useState({
        username: '',
        password: '',
    });

This is my onInputChange function :

const onInputChange = (e) => {
        if ((e.target.id === 'password') === (e.target.id === 'confirmPassword')) {
            console.log('Match!')
        } else {
            console.log('DO NOT Match')
        }
        setUser({ ...user, [e.target.name]: e.target.value });
        console.log('User Updating values: ', user)
    }

This is the input (MUI textfield) :

    <TextField
      id="password"
      name="password"
      label="Password"
      type="password"
      onChange={(e) => onInputChange(e)}
    />
                                                
<TextField
      id="confirmPassword"
      name="confirmPassword"
      label="Confirm password"
      type="password"
      onChange={(e) => onInputChange(e)}
 />

Could you help me with this, please?

Answer 1

Here you can find how it works

CodeSandBox

This is not best practice because you should match password on submit or on blur event trigger on each input.

Ask me if you need furthur help !

Thank You.