And what about this?

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

setIsLoading is an async function and you cannot get the state value immediately after update.

setState actions are asynchronous and are batched for performance gains. setState() does not immediately mutate this. Thus the setState calls are asynchronous as well as batched for better UI experience and performance. This applies on both functional/Class components.

From React documentation

React may batch multiple setState() calls into a single update for performance. Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. You could read more about this here

If you want to get the updated state value then use useEffect hook with dependency array. React will execute this hook after each state update.

const {useEffect, useState } = React;

const App = (props) => {
  const [isLoading, setIsLoading] = useState(false)
  const buttonHandler = () => {
    setIsLoading(current => !current)
  }

  useEffect( () => {
    console.log(isLoading);
}, [isLoading]);

  return (
    <div>
      <button onClick={buttonHandler} type="button">
        Change
      </button>

      {isLoading? "Loading...": null}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

    <div id="root">
      loading.....
    </div>

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]);

The dependency array to useEffect is meant to inform useEffect to run when there is a change in value. So whether you pass isModalOpen or !isModalOpen, its one and the same thing as it just checks whether the value changed i.e false to true or true to false.

The way to conditionally execute something is to aadd a condition in the callback function

useEffect(()=>{
    if(!isModalOpen) {
        // write your code here
    }

},[isModalOpen]);

However, if at some point you want to access the old and new value both in useEffect, you can implement a usePrevious hook as mentioned in the React Hook FAQs

As you said

st is just fetching the state from redux

This is probably the problem.

Probably in the first render, what you get from the redux isn't the correct value (probably null or undefined), so it sets the default value of the state as false, and then happens a second render where it returns the correct value, but won't reassign it to the state.

The default value of useState will be set only in the first render, and if in the first render it isn't what you want, it won't change, unless you set it.

What you could do is use useEffect hook to reset hidden when type changes

export default () => {

  const st = useSelector(state => state.body);
  const { type } = st;

  let bool = type === 'test';

  const [ hidden, setHidden ] = useState(bool) //this is always true

  // reset hidden if type changes
  useEffect(() => {
      setHidden(type === 'test')
  }, [type])

}

In the first case, you are taking the current value of bool (whatever that value may be) and negating it before setting it in the state. As a result, state is changed, so useEffect is triggered.

In the second case, you are providing a hard-coded value. If the value of bool is already false, then setBool(false) won't have any affect on the state; as a result, useEffect won't be triggered.

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);