CODEWITHSUNDEEP
javascriptreactjscallback
Sher Mi
Sher Mi

Reputation: 728

Why does setState callback throw an error: "State updates from the useState() and useReducer() Hooks don't support the second callback argument..."

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?

Upvotes: 3

Views: 17080

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53964

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 <>...</>
}

Upvotes: 9

Related Questions