fix

.changeset/warm-foxes-hang.md

@@ -0,0 +1,5 @@
+---
+"mobx-react-lite": patch
+---
+
+Support customizing `displayName` on anonymous components [#2721](https://github.com/mobxjs/mobx/issues/2721).

packages/mobx-react-lite/__tests__/observer.test.tsx

@@ -562,8 +562,7 @@ it("should hoist known statics only", () => {
     MyHipsterComponent.compare = "Nope!"
     MyHipsterComponent.render = "Nope!"
 
-    const wrapped = observer(MyHipsterComponent)
-    expect(wrapped.displayName).toBe("MyHipsterComponent")
+    const wrapped = observer(MyHipsterComponent)    
     expect(wrapped.randomStaticThing).toEqual(3)
     expect(wrapped.defaultProps).toEqual({ x: 3 })
     expect(wrapped.propTypes).toEqual({ x: isNumber })
@@ -576,7 +575,7 @@ it("should have the correct displayName", () => {
     const TestComponent = observer(function MyComponent() {
         return null
     })
-
+    
     expect((TestComponent as any).type.displayName).toBe("MyComponent")
 })
 

packages/mobx-react-lite/src/observer.ts

@@ -56,7 +56,12 @@ export function observer<P extends object, TRef = {}>(
     const wrappedComponent = (props: P, ref: React.Ref<TRef>) => {
         return useObserver(() => baseComponent(props, ref), baseComponentName)
     }
-    wrappedComponent.displayName = baseComponentName
+
+    // Don't set `displayName` for anonymous components,
+    // so the `displayName` can be customized by user, see #2721.
+    if (baseComponentName != '') {
+        wrappedComponent.displayName = baseComponentName
+    }
 
     // Support legacy context: `contextTypes` must be applied before `memo`       
     if ((baseComponent as any).contextTypes) {
@@ -78,12 +83,11 @@ export function observer<P extends object, TRef = {}>(
     }
 
     copyStaticProperties(baseComponent, memoComponent)
-    memoComponent.displayName = baseComponentName
 
     if ("production" !== process.env.NODE_ENV) {
         Object.defineProperty(memoComponent, 'contextTypes', {
             set() {
-                throw new Error(`[mobx-react-lite] \`${this.displayName || 'Component'}.contextTypes\` must be set before applying \`observer\`.`);
+                throw new Error(`[mobx-react-lite] \`${this.displayName || this.type?.displayName || 'Component'}.contextTypes\` must be set before applying \`observer\`.`);
             }
         })
     }
@@ -96,7 +100,10 @@ const hoistBlackList: any = {
     $$typeof: true,
     render: true,
     compare: true,
-    type: true
+    type: true,
+    // Don't redefine `displayName`, 
+    // it's defined as getter-setter pair on `memo` (see #2721).
+    displayName: true,
 }
 
 function copyStaticProperties(base: any, target: any) {