[BUG] React component doesn't rerender on state change

[jmattheis]

In the example below overmind won't rerender SubComponent on state changes. When adding a useOvermindState all works fine. I guess it is because of the WrapChildren component. Overmind rerenders the WrapChildren component but this dosen't update children from the parent component which results in outdated values.

const WrapChildren: React.FC = ({ children }) => {
  const state = useOvermindState();

  return (
    <div>
      {state.demo.other}
      {children}
    </div>
  );
};

const SubComponent = ({
  value,
  setValue
}: {
  value: DemoState;
  setValue: (v: string) => void;
}) => {
  // with this everything works fine
  // useOvermindState()
  return (
    <div>
      <input value={value.name} onChange={(e) => setValue(e.target.value)} />
    </div>
  );
};

export const App = () => {
  const actions = useOvermindActions();
  const state = useOvermindState();

  return (
    <>
      <WrapChildren>
        <SubComponent
          value={state.demo}
          setValue={(newValue) => actions.demo.setName(newValue)}
        />
      </WrapChildren>
    </>
  );
};

In the example / CodeSandbox the it is not possible to write in the text input, because it doesn't receive the newer values.

CodeSandbox: https://codesandbox.io/s/overmind-no-react-rerender-k98d4

[grandevel]

Going through and cleaning up issues. Looking at this, I think everything is behaving as expected:

• You pass a reference to an object into Subcomponent
• React's props comparator to determine re-render sees no change when you change a property of the object being passed in ( it's the same object ref- so it is determining no re-render is necessary)
• If you change the value= prop passed in to a string/state.demo.name, then it works as expected because React does see a prop change
• The reason it works with useOvermindState() uncommented is because you force overmind to track the component instead of relying on React to do it, thus overmind knows that component uses state and forces it to re-render

To see this for yourself, just add a console.log('render mycomp' ) to both the WrapChildren and Subcomponent, and you'll see which is re-rendering on text box change/action call. React does not re-render Sub even though it re-renders Wrap.

Closing this issue but reopen if you disagree?