fix: also handle memod composite components

Author: RobPruzan

src/core/instrumentation/fiber.ts

@@ -4,22 +4,22 @@
 import type * as React from 'react';
 import type { Fiber } from 'react-reconciler';
 
-const PerformedWorkFlag = 0b01;
+export const PerformedWorkFlag = 0b01;
 export const ClassComponentTag = 1;
 export const FunctionComponentTag = 0;
-const ContextConsumerTag = 9;
+export const ContextConsumerTag = 9;
 export const ForwardRefTag = 11;
-const MemoComponentTag = 14;
-const SimpleMemoComponentTag = 15;
-const HostComponentTag = 5;
-const HostHoistableTag = 26;
-const HostSingletonTag = 27;
-const DehydratedSuspenseComponent = 18;
-const HostText = 6;
-const Fragment = 7;
-const LegacyHiddenComponent = 23;
-const OffscreenComponent = 22;
-const HostRoot = 3;
+export const MemoComponentTag = 14;
+export const SimpleMemoComponentTag = 15;
+export const HostComponentTag = 5;
+export const HostHoistableTag = 26;
+export const HostSingletonTag = 27;
+export const DehydratedSuspenseComponent = 18;
+export const HostText = 6;
+export const Fragment = 7;
+export const LegacyHiddenComponent = 23;
+export const OffscreenComponent = 22;
+export const HostRoot = 3;
 export const CONCURRENT_MODE_NUMBER = 0xeacf;
 export const CONCURRENT_MODE_SYMBOL_STRING = 'Symbol(react.concurrent_mode)';
 export const DEPRECATED_ASYNC_MODE_SYMBOL_STRING = 'Symbol(react.async_mode)';

src/core/instrumentation/index.ts

@@ -1,7 +1,12 @@
 import type { Fiber, FiberRoot } from 'react-reconciler';
 import * as React from 'react';
 import { ReactScanInternals } from '../index';
-import { getDisplayName, fastSerialize, getType } from './utils';
+import {
+  getDisplayName,
+  fastSerialize,
+  getType,
+  getDisplayNameFromFiber,
+} from './utils';
 import {
   didFiberRender,
   getSelfTime,
@@ -12,6 +17,7 @@ import {
   traverseState,
 } from './fiber';
 import { registerDevtoolsHook } from './init';
+import { isCompositeComponent } from '../web/inspect-element/utils';
 
 export interface Change {
   name: string;
@@ -183,7 +189,7 @@ export const reportRenderFiber = (fiber: Fiber, renders: (Render | null)[]) => {
     count: (report?.count ?? 0) + 1,
     time: (report?.time ?? 0) + (time !== 0 ? time : 0.1), // .1ms lowest precision
     badRenders: report?.badRenders ?? [],
-    displayName: getDisplayName(fiber.type),
+    displayName: getDisplayNameFromFiber(fiber),
   });
   ReactScanInternals.emit(
     'reportDataByFiber',
@@ -229,8 +235,13 @@ export const instrument = ({
       const name = getDisplayName(type);
       if (name === 'Million(Profiler)') return;
       if (name) {
-        reportRenderFiber(fiber, [propsRender, contextRender]); // back compat
-        reportRender(name, fiber, [propsRender, contextRender]);
+        reportRender(name, fiber, [propsRender, contextRender]); // back compat
+      }
+
+      if (
+        isCompositeComponent(fiber) // since we key on the fiber we don't need a display name (ex. memo compoenents are anonymous and dont have names)
+      ) {
+        reportRenderFiber(fiber, [propsRender, contextRender]);
       }
 
       if (!propsRender && !contextRender) return null;

src/core/instrumentation/utils.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { Fiber } from 'react-reconciler';
+import { MemoComponentTag, SimpleMemoComponentTag } from './fiber';
 
 export const fastSerialize = (value: unknown) => {
   switch (typeof value) {
@@ -67,3 +69,10 @@ export const getDisplayName = (type: any): string | null => {
   if (!type) return null;
   return type.displayName || type.name || null;
 };
+
+export const getDisplayNameFromFiber = (fiber: Fiber): string | null => {
+  if (fiber.tag === MemoComponentTag || fiber.tag === SimpleMemoComponentTag) {
+    return 'Anonymous';
+  }
+  return getDisplayName(fiber.type);
+};

src/core/web/inspect-element/overlay.ts

@@ -1,6 +1,6 @@
 import type { Fiber } from 'react-reconciler';
 import { ReactScanInternals } from '../..';
-import { getDisplayName } from '../../instrumentation/utils';
+import { getDisplayNameFromFiber } from '../../instrumentation/utils';
 import { getCompositeComponentFromElement } from './utils';
 
 interface Rect {
@@ -162,9 +162,7 @@ export const drawStatsPill = (
 ) => {
   const pillHeight = 24;
   const pillPadding = 8;
-  const componentName = fiber
-    ? (getDisplayName(fiber) ?? 'Unknown')
-    : 'Unknown';
+  const componentName = fiber ? getDisplayNameFromFiber(fiber) : 'Unknown';
   let text = componentName;
   if (stats.count) {
     text += ` • ×${stats.count}`;

src/core/web/inspect-element/utils.ts

@@ -4,8 +4,9 @@ import {
   FunctionComponentTag,
   ClassComponentTag,
   isHostComponent,
-  ForwardRefTag,
   traverseFiber,
+  MemoComponentTag,
+  SimpleMemoComponentTag,
 } from '../../instrumentation/fiber';
 import { getRect } from '../outline';
 
@@ -74,7 +75,7 @@ export const getParentCompositeFiber = (fiber: Fiber) => {
   let prevNonHost = null;
 
   while (curr) {
-    if (curr.tag === FunctionComponentTag || curr.tag === ClassComponentTag) {
+    if (isCompositeComponent(curr)) {
       return [curr, prevNonHost] as const;
     }
     if (isHostComponent(curr)) {
@@ -101,7 +102,7 @@ export const getChangedProps = (fiber: Fiber): Set<string> => {
 export const getStateFromFiber = (fiber: Fiber): any => {
   if (!fiber) return {};
 
-  if (fiber.tag === FunctionComponentTag || fiber.tag === ForwardRefTag) {
+  if (isCompositeComponent(fiber)) {
     // Functional component, need to traverse hooks
     let memoizedState = fiber.memoizedState;
     const state: any = {};
@@ -260,3 +261,12 @@ export const hasValidParent = () => {
   }
   return hasValidParent;
 };
+
+export const isCompositeComponent = (fiber: Fiber) => {
+  return (
+    fiber.tag === FunctionComponentTag ||
+    fiber.tag === ClassComponentTag ||
+    fiber.tag === SimpleMemoComponentTag ||
+    fiber.tag === MemoComponentTag
+  );
+};