React strict mode. Reactive render overriden warning.

[DJWassink]

I was messing around with react 18 and using React.StrictMode to see if there is anything that requires our attention.
And I am encountering the following warning:

observerClass.ts:95 The reactive render of an observer class component (LabelComponent)
                was overriden after MobX attached. This may result in a memory leak if the
                overriden reactive render was not properly disposed.

(source)

When either building for production or removing the <React.StrictMode /> the warning is gone so I am assuming this is something to do with the double calling of mount/unmount in react 18 strictmode https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state

I also noticed there is a test that tests this specific warning:
https://github.com/mobxjs/mobx/blob/78d1aa2362b4dc5d521518688d6ac7e2d4f7ad3a/packages/mobx-react/__tests__/observer.test.tsx#L873~L894

I am however a bit confused since this test replaces the render method with a new one and in our codebase we are doing nothing similiar but are still receiving this warning.

Is this warning something to be concerned about? And what exactly does it say?

[mweststrate]

Are you using render = () => { ... } instead of render() { }, or reassigning to render?

[DJWassink]

Very certain the render method is not getting reassigned.

Sadly I cant share any code and its a very big codebase. I will attempt to create a reproduceable project.

[mweststrate]

Might be the same issue as #3492, although symptoms seem different

[DJWassink]

Havent really been able to create a reproduceable project. Also removing all the observable references inside the component that the warning is about does nothing, so basically it warns about an empty component that's only decorated with @observer.

The issues #3492 does seem similar though. I can imagine that somewhere in the application some dirty side effect are done inside the mount/unmount resulting in this behavior.

[urugator]

#3492 is about render NOT followed by componentDidMount/componentWillUnmount, but in principle react could also skip render scheduled here

mobx/packages/mobx-react/src/observerClass.ts

Line 79 in 78d1aa2

Component.prototype.forceUpdate.call(this)

going straight from componentDidMount to componentWillUnmount, leading to false positive warning.

Maybe we should get rid of the warning and make render non-writable after patching on devel. EDIT: On second thought that could cause some issues with testing tools/mocking, not sure. EDIT2: ... and you can still change value with Object.defineProperty, so not exactly bulletproof...