Bug: Canary version unexpectedly removes markup rendered by a component in Strict Mode

[VasilyStrelyaev]

Our 3rd-party component, DevExtreme Reactive Grid, works as expected in React 18.2 (dev mode with Strict Mode enabled). The Canary channel version 18.3.0 however, first renders the component to the DOM and displays it properly (simulating mount-unmount-mount as usual), but then suddenly removes the rendered markup, without any effects being destroyed or lifecycle methods called for class components. The component remains displayed in React Dev Tools. So, I believe there is probably a regression in React Canary 18.3.0.

You will note that the component uses freshly deprecated defaultProps property, hence some messages in the console, but it seems the issue has nothing to do with them.

React version: 18.3.0-canary-971b62f47-20240129

Steps To Reproduce

1. Run the linked CodeSandbox;
2. See the empty page displayed because the component is first rendered and then removed. The component and its children are still displayed in React Dev Tools;
3. Change React version to 18.2.0 in package.json;
4. See the component properly displayed.

Link to the code example:

https://codesandbox.io/p/sandbox/distracted-visvesvaraya-forked-jlzg8s

The current behavior

The component markup is removed from DOM after the component is rendered.

The expected behavior

The component is displayed on the page.

[eps1lon]

Thank you for the report.

Can you reduce this repro further? Ideally there shouldn't be any 3rd party code in the codesandbox. You can start by inlining the used implementation and then slowly removing unrelated parts until it no longer reproduces.

[eps1lon]

Bisected to canary-e1ad4aa36-20230601: 018c58c...e1ad4aa

Bad (canary-e1ad4aa36-20230601): https://codesandbox.io/p/sandbox/react-28156-bad-jf3jdh
Good (canary-018c58c9c-20230601): https://codesandbox.io/p/sandbox/react-28156-good-h9hnvd

@VasilyStrelyaev Do you know if @devexpress/dx-react-core still uses class components and componentWillUnmount? This may have been an intentional change in #26842 that flushed out problematic usage of componentWillUnmount. https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development hopefully helps to get an understanding why componentWillUnmount needs to match componentDidMount so that componentDidMount() -> componentWillUnmount() -> componentDidMount() still works as expected in development.

[VasilyStrelyaev]

@eps1lon thank you for the bisection!

I looked for class components whose componentWillUnmount method matches the constructor and that do not have a componentDidMount, like in the PR description. I found a couple and refactored them, which resolved the issue!