Add configure option to disable descriptor cache

.changeset/curly-ladybugs-sparkle.md

@@ -0,0 +1,5 @@
+---
+"mobx": minor
+---
+
+Add a configure option to disable descriptor cache reuse for observable object keys.

docs/configuration.md

@@ -196,6 +196,18 @@ Note it doesn't affect existing observables, only the ones created after it's be
 configure({ safeDescriptors: false })
 ```
 
+#### `useDescriptorCache: boolean`
+
+MobX caches property descriptors for observable plain-object keys so repeated keys can reuse the same getter and setter functions. This is usually a small performance optimization, but the cache can grow without bound when observables are created with a very large number of unique property names, such as UUIDs used as object keys during SSR.
+
+`configure({ useDescriptorCache: false })` disables descriptor reuse and clears any descriptors that were cached so far. Existing observable objects keep working; only future observable properties stop using the cache. **Default: `true`**
+
+```javascript
+configure({ useDescriptorCache: false })
+```
+
+Whenever possible, prefer `observable.map` for truly dynamic key-based collections.
+
 ## Further configuration options
 
 #### `isolateGlobalState: boolean`

packages/mobx/__tests__/v5/base/observables.js

@@ -2193,6 +2193,44 @@ test("configure({ safeDescriptors: false })", () => {
     expect(globalState.safeDescriptors).toBe(true)
 })
 
+test("configure({ useDescriptorCache: false }) disables and evicts cached object descriptors", () => {
+    const globalState = mobx._getGlobalState()
+    const getKeyGetter = () =>
+        Object.getOwnPropertyDescriptor(
+            mobx.observable.object(
+                {
+                    key: 1
+                },
+                {},
+                { proxy: false }
+            ),
+            "key"
+        ).get
+
+    try {
+        expect(globalState.useDescriptorCache).toBe(true)
+
+        const cachedGetter = getKeyGetter()
+        expect(getKeyGetter()).toBe(cachedGetter)
+
+        mobx.configure({ useDescriptorCache: false })
+        expect(globalState.useDescriptorCache).toBe(false)
+
+        const uncachedGetter = getKeyGetter()
+        expect(uncachedGetter).not.toBe(cachedGetter)
+        expect(getKeyGetter()).not.toBe(uncachedGetter)
+
+        mobx.configure({ useDescriptorCache: true })
+        expect(globalState.useDescriptorCache).toBe(true)
+
+        const recachedGetter = getKeyGetter()
+        expect(recachedGetter).not.toBe(cachedGetter)
+        expect(getKeyGetter()).toBe(recachedGetter)
+    } finally {
+        mobx.configure({ useDescriptorCache: true })
+    }
+})
+
 test("function props are observable auto actions", () => {
     const o = observable({
         observable: 0,

packages/mobx/src/api/configure.ts

@@ -1,4 +1,9 @@
-import { globalState, isolateGlobalState, setReactionScheduler } from "../internal"
+import {
+    clearObservablePropDescriptorCache,
+    globalState,
+    isolateGlobalState,
+    setReactionScheduler
+} from "../internal"
 
 const NEVER = "never"
 const ALWAYS = "always"
@@ -19,6 +24,7 @@ export function configure(options: {
     isolateGlobalState?: boolean
     disableErrorBoundaries?: boolean
     safeDescriptors?: boolean
+    useDescriptorCache?: boolean
     reactionScheduler?: (f: () => void) => void
     useProxies?: "always" | "never" | "ifavailable"
 }): void {
@@ -42,6 +48,12 @@ export function configure(options: {
         globalState.enforceActions = ea
         globalState.allowStateChanges = ea === true || ea === ALWAYS ? false : true
     }
+    if ("useDescriptorCache" in options) {
+        globalState.useDescriptorCache = !!options.useDescriptorCache
+        if (!globalState.useDescriptorCache) {
+            clearObservablePropDescriptorCache()
+        }
+    }
     ;[
         "computedRequiresReaction",
         "reactionRequiresObservable",

packages/mobx/src/core/globalstate.ts

@@ -144,6 +144,11 @@ export class MobXGlobals {
      */
     verifyProxies = false
 
+    /*
+     * Reuse property descriptors for observable plain-object keys.
+     */
+    useDescriptorCache = true
+
     /**
      * False forces all object's descriptors to
      * writable: true
@@ -178,6 +183,9 @@ export let globalState: MobXGlobals = (function () {
         if (!global.__mobxGlobals.UNCHANGED) {
             global.__mobxGlobals.UNCHANGED = {}
         } // make merge backward compatible
+        if (global.__mobxGlobals.useDescriptorCache === undefined) {
+            global.__mobxGlobals.useDescriptorCache = true
+        }
         return global.__mobxGlobals
     } else {
         global.__mobxInstanceCount = 1

packages/mobx/src/types/observableobject.ts

@@ -50,7 +50,11 @@ import {
     checkIfStateModificationsAreAllowed
 } from "../internal"
 
-const descriptorCache = Object.create(null)
+let descriptorCache = Object.create(null)
+
+export function clearObservablePropDescriptorCache() {
+    descriptorCache = Object.create(null)
+}
 
 export type IObjectDidChange<T = any> = {
     observableKind: "object"
@@ -698,18 +702,22 @@ const isObservableObjectAdministration = createInstanceofPredicate(
     ObservableObjectAdministration
 )
 
-function getCachedObservablePropDescriptor(key) {
-    return (
-        descriptorCache[key] ||
-        (descriptorCache[key] = {
-            get() {
-                return this[$mobx].getObservablePropValue_(key)
-            },
-            set(value) {
-                return this[$mobx].setObservablePropValue_(key, value)
-            }
-        })
-    )
+function createObservablePropDescriptor(key: PropertyKey) {
+    return {
+        get() {
+            return this[$mobx].getObservablePropValue_(key)
+        },
+        set(value) {
+            return this[$mobx].setObservablePropValue_(key, value)
+        }
+    }
+}
+
+function getCachedObservablePropDescriptor(key: PropertyKey) {
+    if (!globalState.useDescriptorCache) {
+        return createObservablePropDescriptor(key)
+    }
+    return descriptorCache[key] || (descriptorCache[key] = createObservablePropDescriptor(key))
 }
 
 export function isObservableObject(thing: any): boolean {