How to make sure a React state using useState() hook has been updated?

I have tried to solve it using the useEffect() hook but it didn't quite solve my problem. It kind of worked, but I ended up finding it a little too complicated for a simple task like that and I also wasn't feeling sure enough about how many times my function was being executed, and if it was being executed after the state change of not.

The docs on useEffect() mention some use cases for the effect hook and none of them are the use that I was trying to do.

useEffect API reference

Using the effect hook

I got rid of the useEffect() hook completely and made use of the functional form of the setState((prevState) => {...}) function that assures that you'll get a current version of your state when you use it like that. So the code sequence became the following:

// ==========================================================================
// FUNCTION TO HANDLE ON SUBMIT
// ==========================================================================

function onSubmit(event){
  event.preventDefault();
  touchAllInputsValidateAndSubmit();
  return;
}

// ==========================================================================
// FUNCTION TO TOUCH ALL INPUTS WHEN BEGIN SUBMITING
// ==========================================================================

function touchAllInputsValidateAndSubmit() {

  let auxInputs = {};
  const shouldSubmit = true;

  setInputs((prevState) => {

    // CREATE DEEP COPY OF THE STATE'S INPUTS OBJECT
    for (let inputName in prevState) {
      auxInputs = Object.assign(auxInputs, {[inputName]:{...prevState[inputName]}});
    }

    // TOUCH ALL INPUTS
    for (let inputName in auxInputs) {
      auxInputs[inputName].touched = true;
    }

    return({
      ...auxInputs
    });

  });

  validateAllFields(shouldSubmit);

}

// ==========================================================================
// FUNCTION TO VALIDATE ALL INPUT FIELDS
// ==========================================================================

function validateAllFields(shouldSubmit = false) {

  // CREATE DEEP COPY OF THE STATE'S INPUTS OBJECT
  let auxInputs = {};

  setInputs((prevState) => {

    // CREATE DEEP COPY OF THE STATE'S INPUTS OBJECT
    for (let inputName in prevState) {
      auxInputs =
          Object.assign(auxInputs, {[inputName]:{...prevState[inputName]}});
    }

    // ... all the validation code goes here

    return auxInputs; // RETURNS THE UPDATED STATE

  }); // END OF SETINPUTS

  if (shouldSubmit) {
    checkValidationAndSubmit();
  }

}

See from the validationAllFields() declaration that I'm performing all my code for that function inside a call of setInputs( (prevState) => {...}) and that makes sure that I'll be working on an updated current version of my inputs state, i.e: I'm sure that all inputs have been touched by the touchAllInputsValidateAndSubmit() because I'm inside the setInputs() with the functional argument form.

// ==========================================================================
// FUNCTION TO CHECK VALIDATION BEFORE CALLING SUBMITACTION
// ==========================================================================

function checkValidationAndSubmit() {

  let valid = true;

  // THIS IS JUST TO MAKE SURE IT GETS THE MOST RECENT STATE VERSION
  setInputs((prevState) => {

    for (let inputName in prevState) {
      if (inputs[inputName].valid === false) {
        valid = false;
      }
    }
    if (valid) {
      props.submitAction(prevState);
    }

    return prevState;

  });
}

See that I use that same pattern of the setState() with functional argument call inside the checkValidationAndSubmit() function. In there, I also need to make sure that I'm get the current, validated state before I can submit.

This is working without issues so far.

I encountered something like this recently (SO question here), and it seems like what you've come up with is a decent approach.

You can add an arg to useEffect() that should do what you want:

e.g.

useEffect(() => { ... }, [submitted])

to watch for changes in submitted.

Another approach could be to modify hooks to use a callback, something like:

import React, { useState, useCallback } from 'react';

const useStateful = initial => {
  const [value, setValue] = useState(initial);
  return {
    value,
    setValue
  };
};

const useSetState = initialValue => {
  const { value, setValue } = useStateful(initialValue);
  return {
    setState: useCallback(v => {
      return setValue(oldValue => ({
        ...oldValue,
        ...(typeof v === 'function' ? v(oldValue) : v)
      }));
    }, []),
    state: value
  };
};

In this way you can emulate the behavior of the 'classic' setState().