fix: duplicate render count when one component is reused multiple times (#369)

Author: tengweiherr

packages/scan/src/core/instrumentation.ts

@@ -438,17 +438,46 @@ export interface OldRenderData {
 
 const RENDER_DEBOUNCE_MS = 16;
 
-export const renderDataMap = new WeakMap<object, RenderData>();
+export const renderDataMap = new WeakMap<object, Map<string, RenderData>>();
+
+function getFiberIdentifier(fiber: Fiber) {
+  return `${fiber.key}::${fiber.index}`;
+}
+
+export function getRenderData(type: unknown, fiber: Fiber) {
+  const id = getFiberIdentifier(fiber);
+  const keyMap = renderDataMap.get(type as object);
+
+  if (keyMap) {
+    return keyMap.get(id);
+  }
+
+  return undefined;
+}
+
+export function setRenderData(fiber: Fiber, value: RenderData) {
+  const type = getType(fiber.type)
+  const id = getFiberIdentifier(fiber);
+  let keyMap = renderDataMap.get(type as object);
+  
+  if (!keyMap) {
+    keyMap = new Map();
+    renderDataMap.set(type as object, keyMap);
+  }
+
+  keyMap.set(id, value);
+}
 
 const trackRender = (
-  type: unknown,
+  fiber: Fiber,
   fiberSelfTime: number,
   fiberTotalTime: number,
   hasChanges: boolean,
   hasDomMutations: boolean,
 ) => {
   const currentTimestamp = Date.now();
-  const existingData = renderDataMap.get(type as object);
+  const type = getType(fiber.type)
+  const existingData = getRenderData(type, fiber);
 
   if (
     (hasChanges || hasDomMutations) &&
@@ -468,7 +497,7 @@ const trackRender = (
     renderData.totalTime = fiberTotalTime || 0;
     renderData.lastRenderTimestamp = currentTimestamp;
 
-    renderDataMap.set(type as object, { ...renderData });
+    setRenderData(fiber, { ...renderData });
   }
 };
 
@@ -598,7 +627,7 @@ export const createInstrumentation = (
 
             if (phase === 'update') {
               trackRender(
-                type,
+                fiber,
                 fiberSelfTime,
                 fiberTotalTime,
                 hasChanges,

packages/scan/src/web/views/inspector/components-tree/index.tsx

@@ -6,7 +6,7 @@ import {
   useState,
 } from 'preact/hooks';
 import { Store } from '~core/index';
-import { renderDataMap } from '~core/instrumentation';
+import { getRenderData } from '~core/instrumentation';
 import { Icon } from '~web/components/icon';
 import {
   LOCALSTORAGE_KEY,
@@ -44,7 +44,7 @@ const flattenTree = (
       : `${parentPath}-${index}`;
 
     const renderData = node.fiber?.type
-      ? renderDataMap.get(node.fiber.type)
+      ? getRenderData(node.fiber.type, node.fiber)
       : undefined;
 
     const flatNode: FlattenedNode = {