How to invoke functions sequentially in react?

Question

I have a form which, when I submit, should call up 2 functions one by one and then run a condition that is dependent on the mentioned 2 functions.

The handler starts when you press the button, but how do you ensure that they will run sequentially and wait for the result of the previous one?

  const handlerNextPage = () => {
    controlValidInputs();
    handlerSetValues();

    inputsData.pages.isValid.page1 && navigate("step2");
  };

Thank you

Answer 1

if they are synchronous functions so you don't need to worry about they will run one by one but if you are setting state which is asynchronous or calling API in the function which I see that's not the case here. But if you still call an API here in the function you can handle in quite easily by making the function into an async function and putting await but if you setstate and use it value right that is the tricky part because setState need little bit time before setting it so you need to update your logic little bit suppose handlerSetValues(); you setState in this function like this:

const handlerSetValues = () => {
 // code here
 // code here
 // get value of state
 setState(value) // this take little bit time so
 return value // as well and use it handlerNextPage function
}

  const handlerNextPage = () => {
    controlValidInputs();
    const value = handlerSetValues();
    // now use value as state like you use below code I think.
    inputsData.pages.isValid.page1 && navigate("step2");
  };