React class components not rendering with <React.StrictMode>

[acataluddi]

Hi guys,

I was wondering whether any of you experienced any issue with class-based React components and MobX when the <React.StrictMode> is enabled. I've created a quick CodeSandbox Example to explain the issue.

There is a very basic MobX observable store and the following function which triggers the enableService() action:

window.setTimeout(() => {
  store.enableService().then();
}, 1500);

The strange thing is that while functional components get updated as expected (the first "service is enabled string) the class-based one is not (the green one):

However, by removing the <React.StrictMode> wrapper, everything works as expected:

// Doesn't work
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

// Works
root.render(
    <App />
);

The same code was working without problems in older version of React even with the <React.StrictMode> enabled.

Is it possible there is any bug or it's just me missing something obvious?

Thanks,
Adriano

[urugator]

Possibly relates to

Stricter Strict Mode: In the future, React will provide a feature that lets components preserve state between unmounts. To prepare for it, React 18 introduces a new development-only check to Strict Mode. React will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount. If this breaks your app, consider removing Strict Mode until you can fix the components to be resilient to remounting with existing state.

Source: https://github.com/facebook/react/blob/main/CHANGELOG.md#react-1

[urugator]

Yea, the problem is that we do not account for a situation where the same component instance is being reused (re-mounted):
We create reaction during the first render and dispose on unmount. We have to patch componentDidMount: if reaction is disposed -> recreate reaction -> forceUpdate()
@mweststrate

[acataluddi]

Hi @urugator,

thank you for looking at this. Should I convert this to an issue then?

Thanks,
Adriano

[urugator]

Done, thanks for the report.