I am trying to create a setState callback as setState is async and I want to safely use the state afterwards.
function Register(props) {
const [errMsg, setErrMsg] = useState(null);
const fullNameInputRef = useRef();
const emailInputRef = useRef();
const passwordInputRef = useRef();
function submitHandler(event) {
event.preventDefault(); //prevents full page reload
const enteredFullName = fullNameInputRef.current.value;
const enteredEmail= emailInputRef.current.value;
const enteredPassword = passwordInputRef.current.value;
axios({
method: 'post',
url: 'http://localhost:3000/api/users/register',
data: {
username: enteredFullName,
email: enteredEmail,
password: enteredPassword
}
}).then( (res) => {
if (res.data.success == false) {
setErrMsg(`${res.data.message}`, () => { /* setState Callback */
console.log(errMsg);
});
}
else { console.log(res)}
}).catch( (err) => {
console.log(err)
setErrMsg("An error has occured. Please try again later")
});
}
But console.log inside the callback doesn`t work. (console.log(errMsg);) I am getting the following error:
Warning: State updates from the useState() and useReducer() Hooks don't support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().
What am I missing?
Like the error states, setState of hooks doesn't support 2nd argument like in class components:
// BAD, WRONG API
setErrMsg(`${res.data.message}`, () => console.log(errMsg));
Instead, add a useEffect:
// GOOD
setErrMsg(`${res.data.message}`);
useEffect(() => {
console.log(errMsg);
}, [errMsg]
Full code:
function Register(props) {
const [errMsg, setErrMsg] = useState(null);
...
useEffect(() => {
console.log(errMsg);
}, [errMsg]
function submitHandler(event) {
...
axios({ ... }).then((res) => {
if (res.data.success == false) {
setErrMsg(`${res.data.message}`);
}
else { console.log(res)}
}).catch( (err) => {
console.log(err)
setErrMsg("An error has occured. Please try again later")
});
}
return <>...</>
}