I'm struggling to understand what I'm doing here.

const updateStatus = (r, e) => {
    setShowCustomMessage(false);
    setShowConfirmSave(true);
    // axios logic here
};

is being called from:

<select
   id="update_status"
   onChange={e => handleUpdateStatus(r, e)}
   value={r.status_id}
</select>

I need to await until the setShowCustomMessage() has completed before moving on to the setShowConfirmSave() call.

I have tried using a callback:

const handleUpdateStatus = useCallback(
    (r, e) => {
        updateStatus(r, e);
    },
    [updateStatus, showCustomerMessage]
);

But I am having issues understanding what's going on here as I keep getting a range of errors here, no matter how I try to solve them.

React Hook "useCallback" is called conditionally. React Hooks must be called in the exact same order in every component render.

React Hook useCallback has an unnecessary dependency: 'showCustomerMessage'. Either exclude it or remove the dependency array. Outer scope values like 'showCustomerMessage' aren't valid dependencies because mutating them doesn't re-render the component.

I am trying to understand what's going on here, my understanding of the useCallback hook is that I can give it some dependancies, that on those dependancies changing, it should fire that callback, which then it turns fires the "updateStatus()' function from within the useCallback function.

Thank you.

CodePudding user response：

If you want to wait for the state to change before doing x you need to use useEffect to watch for the change in that particular state, and then do x.

const updateStatus = (r, e) => {
  setShowCustomMessage(false);
};

useEffect(() => {
  setShowConfirmSave(true);
  // axios logic here
}, [showCustomMessage]);