mobx-react 7.6.0 → 9.0.0

package/dist/observerClass.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare function makeClassComponentObserver(componentClass: React.ComponentClass<any, any>): React.ComponentClass<any, any>;
+import { ComponentClass } from "react";
+export declare function makeClassComponentObserver(componentClass: ComponentClass<any, any>): ComponentClass<any, any>;

package/dist/utils/utils.d.ts

@@ -1,4 +1,3 @@
-export declare function newSymbol(name: string): symbol | string;
 export declare function shallowEqual(objA: any, objB: any): boolean;
 export declare function copyStaticProperties(base: object, target: object): void;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobx-react",
-    "version": "7.6.0",
+    "version": "9.0.0",
     "description": "React bindings for MobX. Create fully reactive components.",
     "source": "src/index.ts",
     "main": "dist/index.js",
@@ -36,10 +36,10 @@
     },
     "homepage": "https://mobx.js.org",
     "dependencies": {
-        "mobx-react-lite": "^3.4.0"
+        "mobx-react-lite": "^4.0.3"
     },
     "peerDependencies": {
-        "mobx": "^6.1.0",
+        "mobx": "^6.9.0",
         "react": "^16.8.0 || ^17 || ^18"
     },
     "peerDependenciesMeta": {
@@ -51,8 +51,9 @@
         }
     },
     "devDependencies": {
-        "mobx": "^6.7.0",
-        "mobx-react-lite": "^3.4.0"
+        "mobx": "^6.9.0",
+        "mobx-react-lite": "^4.0.3",
+        "expose-gc": "^1.0.0"
     },
     "keywords": [
         "mobx",

package/src/disposeOnUnmount.ts

@@ -1,10 +1,13 @@
 import React from "react"
-import { patch, newSymbol } from "./utils/utils"
+import { patch } from "./utils/utils"
+
+const reactMajorVersion = Number.parseInt(React.version.split(".")[0])
+let warnedAboutDisposeOnUnmountDeprecated = false
 
 type Disposer = () => void
 
-const protoStoreKey = newSymbol("disposeOnUnmountProto")
-const instStoreKey = newSymbol("disposeOnUnmountInst")
+const protoStoreKey = Symbol("disposeOnUnmountProto")
+const instStoreKey = Symbol("disposeOnUnmountInst")
 
 function runDisposersOnWillUnmount() {
     ;[...(this[protoStoreKey] || []), ...(this[instStoreKey] || [])].forEach(propKeyOrFunction => {
@@ -17,12 +20,22 @@ function runDisposersOnWillUnmount() {
     })
 }
 
+/**
+ * @deprecated `disposeOnUnmount` is not compatible with React 18 and higher.
+ */
 export function disposeOnUnmount(target: React.Component<any, any>, propertyKey: PropertyKey): void
+
+/**
+ * @deprecated `disposeOnUnmount` is not compatible with React 18 and higher.
+ */
 export function disposeOnUnmount<TF extends Disposer | Array<Disposer>>(
     target: React.Component<any, any>,
     fn: TF
 ): TF
 
+/**
+ * @deprecated `disposeOnUnmount` is not compatible with React 18 and higher.
+ */
 export function disposeOnUnmount(
     target: React.Component<any, any>,
     propertyKeyOrFunction: PropertyKey | Disposer | Array<Disposer>
@@ -31,6 +44,19 @@ export function disposeOnUnmount(
         return propertyKeyOrFunction.map(fn => disposeOnUnmount(target, fn))
     }
 
+    if (!warnedAboutDisposeOnUnmountDeprecated) {
+        if (reactMajorVersion >= 18) {
+            console.error(
+                "[mobx-react] disposeOnUnmount is not compatible with React 18 and higher. Don't use it."
+            )
+        } else {
+            console.warn(
+                "[mobx-react] disposeOnUnmount is deprecated. It won't work correctly with React 18 and higher."
+            )
+        }
+        warnedAboutDisposeOnUnmountDeprecated = true
+    }
+
     const c = Object.getPrototypeOf(target).constructor
     const c2 = Object.getPrototypeOf(target.constructor)
     // Special case for react-hot-loader

package/src/index.ts

@@ -1,8 +1,13 @@
 import { observable } from "mobx"
 import { Component } from "react"
 
-if (!Component) throw new Error("mobx-react requires React to be available")
-if (!observable) throw new Error("mobx-react requires mobx to be available")
+if (!Component) {
+    throw new Error("mobx-react requires React to be available")
+}
+
+if (!observable) {
+    throw new Error("mobx-react requires mobx to be available")
+}
 
 export {
     Observer,

package/src/observerClass.ts

@@ -1,44 +1,76 @@
-import { PureComponent, Component } from "react"
+import { PureComponent, Component, ComponentClass, ClassAttributes } from "react"
 import {
-    createAtom,
     _allowStateChanges,
     Reaction,
-    $mobx,
     _allowStateReadsStart,
-    _allowStateReadsEnd
+    _allowStateReadsEnd,
+    _getGlobalState
 } from "mobx"
-import { isUsingStaticRendering } from "mobx-react-lite"
+import {
+    isUsingStaticRendering,
+    _observerFinalizationRegistry as observerFinalizationRegistry
+} from "mobx-react-lite"
+import { shallowEqual, patch } from "./utils/utils"
 
-import { newSymbol, shallowEqual, setHiddenProp, patch } from "./utils/utils"
+const administrationSymbol = Symbol("ObserverAdministration")
+const isMobXReactObserverSymbol = Symbol("isMobXReactObserver")
 
-const mobxAdminProperty = $mobx || "$mobx" // BC
-const mobxObserverProperty = newSymbol("isMobXReactObserver")
-const mobxIsUnmounted = newSymbol("isUnmounted")
-const skipRenderKey = newSymbol("skipRender")
-const isForcingUpdateKey = newSymbol("isForcingUpdate")
+let observablePropDescriptors: PropertyDescriptorMap
+if (__DEV__) {
+    observablePropDescriptors = {
+        props: createObservablePropDescriptor("props"),
+        state: createObservablePropDescriptor("state"),
+        context: createObservablePropDescriptor("context")
+    }
+}
+
+type ObserverAdministration = {
+    reaction: Reaction | null // also serves as disposed flag
+    forceUpdate: Function | null
+    mounted: boolean // we could use forceUpdate as mounted flag
+    name: string
+    // Used only on __DEV__
+    props: any
+    state: any
+    context: any
+}
+
+function getAdministration(component: Component): ObserverAdministration {
+    // We create administration lazily, because we can't patch constructor
+    // and the exact moment of initialization partially depends on React internals.
+    // At the time of writing this, the first thing invoked is one of the observable getter/setter (state/props/context).
+    return (component[administrationSymbol] ??= {
+        reaction: null,
+        mounted: false,
+        forceUpdate: null,
+        name: getDisplayName(component.constructor as ComponentClass),
+        state: undefined,
+        props: undefined,
+        context: undefined
+    })
+}
 
 export function makeClassComponentObserver(
-    componentClass: React.ComponentClass<any, any>
-): React.ComponentClass<any, any> {
-    const target = componentClass.prototype
+    componentClass: ComponentClass<any, any>
+): ComponentClass<any, any> {
+    const { prototype } = componentClass
 
-    if (componentClass[mobxObserverProperty]) {
-        const displayName = getDisplayName(target)
-        console.warn(
-            `The provided component class (${displayName})
-                has already been declared as an observer component.`
+    if (componentClass[isMobXReactObserverSymbol]) {
+        const displayName = getDisplayName(componentClass)
+        throw new Error(
+            `The provided component class (${displayName}) has already been declared as an observer component.`
         )
     } else {
-        componentClass[mobxObserverProperty] = true
+        componentClass[isMobXReactObserverSymbol] = true
     }
 
-    if (target.componentWillReact) {
+    if (prototype.componentWillReact) {
         throw new Error("The componentWillReact life-cycle event is no longer supported")
     }
     if (componentClass["__proto__"] !== PureComponent) {
-        if (!target.shouldComponentUpdate) {
-            target.shouldComponentUpdate = observerSCU
-        } else if (target.shouldComponentUpdate !== observerSCU) {
+        if (!prototype.shouldComponentUpdate) {
+            prototype.shouldComponentUpdate = observerSCU
+        } else if (prototype.shouldComponentUpdate !== observerSCU) {
             // n.b. unequal check, instead of existence check, as @observer might be on superclass as well
             throw new Error(
                 "It is not allowed to use shouldComponentUpdate in observer based components."
@@ -46,146 +78,153 @@ export function makeClassComponentObserver(
         }
     }
 
-    // this.props and this.state are made observable, just to make sure @computed fields that
-    // are defined inside the component, and which rely on state or props, re-compute if state or props change
-    // (otherwise the computed wouldn't update and become stale on props change, since props are not observable)
-    // However, this solution is not without it's own problems: https://github.com/mobxjs/mobx-react/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3Aobservable-props-or-not+
-    makeObservableProp(target, "props")
-    makeObservableProp(target, "state")
-    if (componentClass.contextType) {
-        makeObservableProp(target, "context")
+    if (__DEV__) {
+        Object.defineProperties(prototype, observablePropDescriptors)
     }
 
-    const originalRender = target.render
+    const originalRender = prototype.render
     if (typeof originalRender !== "function") {
-        const displayName = getDisplayName(target)
+        const displayName = getDisplayName(componentClass)
         throw new Error(
             `[mobx-react] class component (${displayName}) is missing \`render\` method.` +
                 `\n\`observer\` requires \`render\` being a function defined on prototype.` +
                 `\n\`render = () => {}\` or \`render = function() {}\` is not supported.`
         )
     }
-    target.render = function () {
-        this.render = isUsingStaticRendering()
-            ? originalRender
-            : createReactiveRender.call(this, originalRender)
+
+    prototype.render = function () {
+        Object.defineProperty(this, "render", {
+            // There is no safe way to replace render, therefore it's forbidden.
+            configurable: false,
+            writable: false,
+            value: isUsingStaticRendering()
+                ? originalRender
+                : createReactiveRender.call(this, originalRender)
+        })
         return this.render()
     }
-    patch(target, "componentDidMount", function () {
-        this[mobxIsUnmounted] = false
-        if (!this.render[mobxAdminProperty]) {
-            // Reaction is re-created automatically during render, but a component can re-mount and skip render #3395.
-            // To re-create the reaction and re-subscribe to relevant observables we have to force an update.
-            Component.prototype.forceUpdate.call(this)
-        }
-    })
-    patch(target, "componentWillUnmount", function () {
-        if (isUsingStaticRendering()) {
-            return
-        }
 
-        const reaction = this.render[mobxAdminProperty]
-        if (reaction) {
-            reaction.dispose()
-            // Forces reaction to be re-created on next render
-            this.render[mobxAdminProperty] = null
-        } else {
-            // Render may have been hot-swapped and/or overridden by a subclass.
-            const displayName = getDisplayName(this)
-            console.warn(
-                `The reactive render of an observer class component (${displayName})
-                was overridden after MobX attached. This may result in a memory leak if the
-                overridden reactive render was not properly disposed.`
+    const originalComponentDidMount = prototype.componentDidMount
+    prototype.componentDidMount = function () {
+        if (__DEV__ && this.componentDidMount !== Object.getPrototypeOf(this).componentDidMount) {
+            const displayName = getDisplayName(componentClass)
+            throw new Error(
+                `[mobx-react] \`observer(${displayName}).componentDidMount\` must be defined on prototype.` +
+                    `\n\`componentDidMount = () => {}\` or \`componentDidMount = function() {}\` is not supported.`
             )
         }
 
-        this[mobxIsUnmounted] = true
+        // `componentDidMount` may not be called at all. React can abandon the instance after `render`.
+        // That's why we use finalization registry to dispose reaction created during render.
+        // Happens with `<Suspend>` see #3492
+        //
+        // `componentDidMount` can be called immediately after `componentWillUnmount` without calling `render` in between.
+        // Happens with `<StrictMode>`see #3395.
+        //
+        // If `componentDidMount` is called, it's guaranteed to run synchronously with render (similary to `useLayoutEffect`).
+        // Therefore we don't have to worry about external (observable) state being updated before mount (no state version checking).
+        //
+        // Things may change: "In the future, React will provide a feature that lets components preserve state between unmounts"
+
+        const admin = getAdministration(this)
+
+        admin.mounted = true
+
+        // Component instance committed, prevent reaction disposal.
+        observerFinalizationRegistry.unregister(admin)
+
+        // We don't set forceUpdate before mount because it requires a reference to `this`,
+        // therefore `this` could NOT be garbage collected before mount,
+        // preventing reaction disposal by FinalizationRegistry and leading to memory leak.
+        // As an alternative we could have `admin.instanceRef = new WeakRef(this)`, but lets avoid it if possible.
+        admin.forceUpdate = () => this.forceUpdate()
+
+        if (!admin.reaction) {
+            // 1. Instance was unmounted (reaction disposed) and immediately remounted without running render #3395.
+            // 2. Reaction was disposed by finalization registry before mount. Shouldn't ever happen for class components:
+            // `componentDidMount` runs synchronously after render, but our registry are deferred (can't run in between).
+            // In any case we lost subscriptions to observables, so we have to create new reaction and re-render to resubscribe.
+            // The reaction will be created lazily by following render.
+            admin.forceUpdate()
+        }
+        return originalComponentDidMount?.apply(this, arguments)
+    }
+
+    // TODO@major Overly complicated "patch" is only needed to support the deprecated @disposeOnUnmount
+    patch(prototype, "componentWillUnmount", function () {
+        if (isUsingStaticRendering()) {
+            return
+        }
+        const admin = getAdministration(this)
+        admin.reaction?.dispose()
+        admin.reaction = null
+        admin.forceUpdate = null
+        admin.mounted = false
     })
+
     return componentClass
 }
 
 // Generates a friendly name for debugging
-function getDisplayName(comp: any) {
-    return (
-        comp.displayName ||
-        comp.name ||
-        (comp.constructor && (comp.constructor.displayName || comp.constructor.name)) ||
-        "<component>"
-    )
+function getDisplayName(componentClass: ComponentClass) {
+    return componentClass.displayName || componentClass.name || "<component>"
 }
 
 function createReactiveRender(originalRender: any) {
-    /**
-     * If props are shallowly modified, react will render anyway,
-     * so atom.reportChanged() should not result in yet another re-render
-     */
-    setHiddenProp(this, skipRenderKey, false)
-    /**
-     * forceUpdate will re-assign this.props. We don't want that to cause a loop,
-     * so detect these changes
-     */
-    setHiddenProp(this, isForcingUpdateKey, false)
-
-    const initialName = getDisplayName(this)
     const boundOriginalRender = originalRender.bind(this)
 
-    let isRenderingPending = false
-
-    const createReaction = () => {
-        const reaction = new Reaction(`${initialName}.render()`, () => {
-            if (!isRenderingPending) {
-                // N.B. Getting here *before mounting* means that a component constructor has side effects (see the relevant test in misc.test.tsx)
-                // This unidiomatic React usage but React will correctly warn about this so we continue as usual
-                // See #85 / Pull #44
-                isRenderingPending = true
-                if (this[mobxIsUnmounted] !== true) {
-                    let hasError = true
-                    try {
-                        setHiddenProp(this, isForcingUpdateKey, true)
-                        if (!this[skipRenderKey]) {
-                            Component.prototype.forceUpdate.call(this)
-                        }
-                        hasError = false
-                    } finally {
-                        setHiddenProp(this, isForcingUpdateKey, false)
-                        if (hasError) {
-                            reaction.dispose()
-                            // Forces reaction to be re-created on next render
-                            this.render[mobxAdminProperty] = null
-                        }
-                    }
-                }
-            }
-        })
-        reaction["reactComponent"] = this
-        return reaction
-    }
+    const admin = getAdministration(this)
 
     function reactiveRender() {
-        isRenderingPending = false
-        // Create reaction lazily to support re-mounting #3395
-        const reaction = (reactiveRender[mobxAdminProperty] ??= createReaction())
-        let exception: unknown = undefined
-        let rendering = undefined
-        reaction.track(() => {
+        if (!admin.reaction) {
+            // Create reaction lazily to support re-mounting #3395
+            admin.reaction = createReaction(admin)
+            if (!admin.mounted) {
+                // React can abandon this instance and never call `componentDidMount`/`componentWillUnmount`,
+                // we have to make sure reaction will be disposed.
+                observerFinalizationRegistry.register(this, admin, this)
+            }
+        }
+
+        let error: unknown = undefined
+        let renderResult = undefined
+        admin.reaction.track(() => {
             try {
                 // TODO@major
                 // Optimization: replace with _allowStateChangesStart/End (not available in mobx@6.0.0)
-                rendering = _allowStateChanges(false, boundOriginalRender)
+                renderResult = _allowStateChanges(false, boundOriginalRender)
             } catch (e) {
-                exception = e
+                error = e
             }
         })
-        if (exception) {
-            throw exception
+        if (error) {
+            throw error
         }
-        return rendering
+        return renderResult
     }
 
     return reactiveRender
 }
 
-function observerSCU(nextProps: React.ClassAttributes<any>, nextState: any): boolean {
+function createReaction(admin: ObserverAdministration) {
+    return new Reaction(`${admin.name}.render()`, () => {
+        if (!admin.mounted) {
+            // This is neccessary to avoid react warning about calling forceUpdate on component that isn't mounted yet.
+            // This happens when component is abandoned after render - our reaction is already created and reacts to changes.
+            // Due to the synchronous nature of `componenDidMount`, we don't have to worry that component could eventually mount and require update.
+            return
+        }
+
+        try {
+            admin.forceUpdate?.()
+        } catch (error) {
+            admin.reaction?.dispose()
+            admin.reaction = null
+        }
+    })
+}
+
+function observerSCU(nextProps: ClassAttributes<any>, nextState: any): boolean {
     if (isUsingStaticRendering()) {
         console.warn(
             "[mobx-react] It seems that a re-rendering of a React component is triggered while in static (server-side) mode. Please make sure components are rendered only once server-side."
@@ -202,45 +241,24 @@ function observerSCU(nextProps: React.ClassAttributes<any>, nextState: any): boo
     return !shallowEqual(this.props, nextProps)
 }
 
-function makeObservableProp(target: any, propName: string): void {
-    const valueHolderKey = newSymbol(`reactProp_${propName}_valueHolder`)
-    const atomHolderKey = newSymbol(`reactProp_${propName}_atomHolder`)
-    function getAtom() {
-        if (!this[atomHolderKey]) {
-            setHiddenProp(this, atomHolderKey, createAtom("reactive " + propName))
-        }
-        return this[atomHolderKey]
-    }
-    Object.defineProperty(target, propName, {
+function createObservablePropDescriptor(key: "props" | "state" | "context") {
+    return {
         configurable: true,
         enumerable: true,
-        get: function () {
-            let prevReadState = false
-
-            // Why this check? BC?
-            // @ts-expect-error
-            if (_allowStateReadsStart && _allowStateReadsEnd) {
-                prevReadState = _allowStateReadsStart(true)
+        get() {
+            const admin = getAdministration(this)
+            const derivation = _getGlobalState().trackingDerivation
+            if (derivation && derivation !== admin.reaction) {
+                throw new Error(
+                    `[mobx-react] Cannot read "${admin.name}.${key}" in a reactive context, as it isn't observable.
+                    Please use component lifecycle method to copy the value into a local observable first.
+                    See https://github.com/mobxjs/mobx/blob/main/packages/mobx-react/README.md#note-on-using-props-and-state-in-derivations`
+                )
             }
-            getAtom.call(this).reportObserved()
-
-            // Why this check? BC?
-            // @ts-expect-error
-            if (_allowStateReadsStart && _allowStateReadsEnd) {
-                _allowStateReadsEnd(prevReadState)
-            }
-
-            return this[valueHolderKey]
+            return admin[key]
         },
-        set: function set(v) {
-            if (!this[isForcingUpdateKey] && !shallowEqual(this[valueHolderKey], v)) {
-                setHiddenProp(this, valueHolderKey, v)
-                setHiddenProp(this, skipRenderKey, true)
-                getAtom.call(this).reportChanged()
-                setHiddenProp(this, skipRenderKey, false)
-            } else {
-                setHiddenProp(this, valueHolderKey, v)
-            }
+        set(value) {
+            getAdministration(this)[key] = value
         }
-    })
+    }
 }

package/src/utils/utils.ts

@@ -1,21 +1,3 @@
-let symbolId = 0
-function createSymbol(name: string): symbol | string {
-    if (typeof Symbol === "function") {
-        return Symbol(name)
-    }
-    const symbol = `__$mobx-react ${name} (${symbolId})`
-    symbolId++
-    return symbol
-}
-
-const createdSymbols = {}
-export function newSymbol(name: string): symbol | string {
-    if (!createdSymbols[name]) {
-        createdSymbols[name] = createSymbol(name)
-    }
-    return createdSymbols[name]
-}
-
 export function shallowEqual(objA: any, objB: any): boolean {
     //From: https://github.com/facebook/fbjs/blob/c69904a511b900266935168223063dd8772dfc40/packages/fbjs/src/core/shallowEqual.js
     if (is(objA, objB)) {
@@ -96,8 +78,8 @@ export function setHiddenProp(target: object, prop: any, value: any): void {
  * Utilities for patching componentWillUnmount, to make sure @disposeOnUnmount works correctly icm with user defined hooks
  * and the handler provided by mobx-react
  */
-const mobxMixins = newSymbol("patchMixins")
-const mobxPatchedDefinition = newSymbol("patchedDefinition")
+const mobxMixins = Symbol("patchMixins")
+const mobxPatchedDefinition = Symbol("patchedDefinition")
 
 export interface Mixins extends Record<string, any> {
     locks: number
@@ -175,6 +157,7 @@ function createDefinition(
     let wrappedFunc = wrapFunction(originalMethod, mixins)
 
     return {
+        // @ts-ignore
         [mobxPatchedDefinition]: true,
         get: function () {
             return wrappedFunc