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

[carvinlo]

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

[carvinlo]

it works also:

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

addReducer("increment", (global, dispatch) => {
  console.log("increment", global.value);
  return {
    value: (global.value || 0) + 1
  };
});

const Post = props => {
  const increment = useDispatch("increment");
  const [value] = useGlobal("value");
  return (
    <>
      <Button
        onClick={() => {
          increment();
        }}
      >
        {value}
      </Button>
    </>
  );
};

[ASHFAQPATWARI]

@carvinlo I am facing the exact same problem. If i just subscribe to global state using const [global] = useGlobal(); then the component is not getting updated, no re-render happens.

However if I subscribe to a key using const [value] = useGlobal("value"); , component re-renders properly.

@CharlesStover is this the intended behaviour or are we missing something?

[quisido]

I would be good to have a minimal reproduction on CodePen or something similar. I'd need to investigate if this is a problem with the reducer or a problem with useGlobal. Both are used in production code and are well unit tested; and I've not experienced an issue with the component not re-rendering.

I'd definitely like to solve it for you, but I don't see anything wrong with the code as I see it here, which is why a CodePen would be helpful.

[ASHFAQPATWARI]

@CharlesStover Here is a stackblitz showing the issue: https://react-n7i5si.stackblitz.io/

Clicking on button will only update the component which has subscribed to an extra property other the globalstate.

[quisido]

Thank you for that @ASHFAQPATWARI . I'm not familiar with stackbliz. Is it possible to see the original source code, similar to how CodePen lets you see the code alongside its output?

[quisido]

I found the source code for stackblitz. Thank you, that is a good find. https://stackblitz.com/edit/react-n7i5si/

[ASHFAQPATWARI]

@CharlesStover any update on this one?

[quisido]

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.