Trying to properly use ReactHook's useState - state

Question

I want to establish some simple validation for my functional React component. To that end, I'm using ReactHook's useState to instantiate a validationErrors object that is intended to grow like this:
{}
{'fieldName1': 'Some error message'}
{'fieldName1': 'Some error message', 'fieldName2': 'Another error message'}
{'fieldName1': 'Different error message', 'fieldName2': 'Another error message'}
const [validationErrors, setValidationErrors] = useState(null);
// If this function is working correctly then it will either add a
// new key-value pair if the key doesn't exist yet or will update
// the value if the key already exists.
const updateValidationErrors = (name, error) => {
if ([name] in validationErrors) {
setValidationErrors({...validationErrors, [name]: error});
} else {
setValidationErrors({[name]: error, ...validationErrors});
}
};
const checkValidation = (target) => {
updateValidationErrors('companyName', 'Test Company 1');
console.log(validationErrors);
updateValidationErrors('companyName', 'Test Company 2');
console.log(validationErrors);
updateValidationErrors('notes', 'Notes error message 1');
console.log(validationErrors);
updateValidationErrors('notes', 'Notes error message 2');
console.log(validationErrors);
updateValidationErrors('companyName', 'Test Company 3');
console.log(validationErrors);
};
I'm getting strange results with the console.log and am wondering if that's because there is a short async delay with ReactHook's useState?
Or is there something wrong with my updateValidationErrors code?
Note: I tested the function here: https://repl.it/repls/WeeklyMustyMiddleware

Answer 1

I guess it won't work like this because in
const [validationErrors, setValidationErrors] = useState(null);
setValidationErrors is nothing but the short hand of setState({ validationErrors: <new value> }) which you have mentioned as well.
setState in react is an async call and doesn't guarantee that the value will be updated after the setState line is executed.
Try this to see the updated result
const [validationErrors, setValidationErrors] = useState();
const updateValidationErrors = (name, error) => {
setValidationErrors({...validationErrors, [name]: error});
};
const checkValidation = (target) => {
updateValidationErrors('companyName', 'Test Company 1');
updateValidationErrors('companyName', 'Test Company 2');
updateValidationErrors('notes', 'Notes error message 1');
updateValidationErrors('notes', 'Notes error message 2');
updateValidationErrors('companyName', 'Test Company 3');
};

Answer 2

react useState is not rective to console
react useState is not rective, then you can do useEffect to console.
And then you will see when validationErrorsupdate.
Add this line to your code
useEffect(() => console.log(validationErrors))
And of course
import React, { useEffect } from 'react';