Global state returned by useGlobal() does not subscribe to changes.

import { addReducer, setGlobal, useDispatch, useGlobal, getGlobal } from "reactn";

// Initialize the global state with the value 0.
setGlobal({ value: 0 });

// When the increment reducer is called, increment the global value by X.
addReducer("increment", (global, dispatch) => ({
  value: global.value + 1
}));

const Post = props => {
  const increment = useDispatch("increment");
  const [global] = useGlobal();

  return (
    <>
      <Button
        onClick={() => {
          increment();
          // increment(global.value); // it works
        }}
      >
        {global.value}
      </Button>
    </>
  );
};

[CharlesStover]

I think this is due to the asynchronous nature of your lifecycle methods. Change useEffect to useLayoutEffect when you are synchronizing states. useLayoutEffect will fire after render but before paint, which is what you want in this case. In the above Stackblitz example, you are changing local state, repainting, then changing global state (useEffect). What you want is to change local state, change global state (useLayoutEffect), then repaint.

As to why one component renders correctly and the other doesn’t, I think that is just an implementation detail of React that should not be of concern. They both pass unit tests for re-rendering on state change. When dealing with proper lifecycle methods, this issue doesn’t arise. When dealing with improper lifecycle methods, the resulting behavior need not be accounted for.

Hope this helps. Great find! Without further reasoning, I believe this behavior is a side effect of the wrong lifecycle hook and that useLayoutEffect is the correct lifecycle hook for the intended behavior of the application.

[ASHFAQPATWARI]

@CharlesStover any update on this one?