You cannot use the same flag to register and deregister mutation. It doesn't make sense at all. Why do you need to setHasRegisteredMutationInFlight (false) in deregisterMutation? You can just deregister and while you register back on some value you set the flag to false such that it doesn't depend on the same value. Just a working example of what I mean

You can also let me know what specific use case you are catering for such that I can help you more

import React, { useEffect, useCallback, useState } from "react";
import ReactDOM from "react-dom";

const mutationName = "MUTATION_NAME";

function App() {
  const [type, setType] = useState("");
  const [isMutationSet, setMutationToRegister] = useState(true);
  const inFlightDispatch = useCallback(
    stuff => {
      setType(stuff.type);
    },
    [setType]
  );

  useEffect(() => {
    if (isMutationSet && inFlightDispatch) {
      inFlightDispatch({ type: "registerMutation", mutationName });
      setMutationToRegister(false);
    }
  }, [isMutationSet, inFlightDispatch]);

  const deregisterMutation = () => {
    inFlightDispatch({ type: "deregisterMutation", mutationName });
  };

  const registerMutation = () => {
    setMutationToRegister(true);
  };

  return (
    <div className="App">
      {type}
      <button onClick={deregisterMutation}>Degister</button>
      <button onClick={registerMutation}>Register</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

You can add another useEffect which watches this change, useEffect takes a second argument which is dependency array and the effect gets called if any of the dependency array value changes .

In this case since you need to make a decision based on the nomStatus, you can add it as a dependency to your useEffect

useEffect(() => {
  if (nomStatus) {
    setShowCalender(true);
  }
}, [nomStatus]);

And what about this?

useEffect(() => {
  if (val) {
    // do stuff
   }
}, [val]);