feat(react-scan): Update options, add context updates, improve performance

Author: aidenybai

README.md

@@ -95,19 +95,19 @@ We expect all contributors to abide by the terms of our [Code of Conduct](https:
 - [x] Scan API (`withScan`, `scan`)
 - [ ] Don't show label if no reconciliation occurred ("client renders" in DevTools)
 - [ ] Investigate `__REACT_DEVTOOLS_TARGET_WINDOW__`
-- [ ] Chrome extension
+- [x] Chrome extension (h/t [@biw](https://github.com/biw))
 - [ ] "PageSpeed insights" for React
-- [ ] Cleanup config options
+- [x] Cleanup config options
 - [ ] Offscreen canvas on worker thread
 - [ ] React Native support
 - [ ] "global" counter using `sessionStorage`, aggregate count stats instead of immediate replacement
 - [ ] Name / explain the actual problem
-- [ ] More explicit options override API (start log at certain area, stop log, etc.)
-- [ ] Expose primitives / internals for advanced use cases
-- [ ] Add more problem detections other than props
+- [x] More explicit options override API (start log at certain area, stop log, etc.)
+- [x] Expose primitives / internals for advanced use cases
+- [x] Add context updates
 - [ ] Simple FPS counter
 - [ ] Drag and select areas of the screen to scan
-- [ ] Mode to only show on main thread blocking
+- [x] Mode to show on main thread blocking
 - [ ] Add a funny mascot, like the ["Stop I'm Changing" dude](https://www.youtube.com/shorts/FwOZdX7bDKI?app=desktop)
 
 ## Acknowledgments

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scan",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Scan your React app for renders",
   "keywords": [
     "react",

src/core/index.ts

@@ -7,10 +7,11 @@ import {
   getOutline,
   type PendingOutline,
 } from './web/outline';
-import { createCanvas } from './web/index';
+import { createOverlay } from './web/index';
 import { logIntro } from './web/log';
 import { createToolbar } from './web/toolbar';
 import { playGeigerClickSound } from './web/geiger';
+import { createPerfObserver } from './web/perf-observer';
 
 interface Options {
   /**
@@ -54,6 +55,14 @@ interface Options {
    */
   showToolbar?: boolean;
 
+  /**
+   * Long task threshold in milliseconds, only show
+   * when main thread is blocked for longer than this
+   *
+   * @default 50
+   */
+  longTaskThreshold?: number;
+
   onCommitStart?: () => void;
   onRender?: (fiber: Fiber, render: Render) => void;
   onCommitFinish?: () => void;
@@ -89,9 +98,10 @@ export const ReactScanInternals: Internals = {
     enabled: true,
     includeChildren: true,
     runInProduction: false,
-    log: false,
     playSound: false,
+    log: false,
     showToolbar: true,
+    longTaskThreshold: 50,
   },
   scheduledOutlines: [],
   activeOutlines: [],
@@ -112,8 +122,9 @@ export const start = () => {
   if (inited) return;
   inited = true;
   const { options } = ReactScanInternals;
-  const ctx = createCanvas();
+  const ctx = createOverlay();
   const toolbar = options.showToolbar ? createToolbar() : null;
+  const perfObserver = createPerfObserver();
   const audioContext =
     typeof window !== 'undefined'
       ? new (window.AudioContext ||
@@ -149,7 +160,7 @@ export const start = () => {
       }
 
       requestAnimationFrame(() => {
-        flushOutlines(ctx, new Map(), toolbar);
+        flushOutlines(ctx, new Map(), toolbar, perfObserver);
       });
     },
     onCommitFinish() {

src/core/instrumentation/fiber.ts

@@ -50,23 +50,80 @@ export const registerDevtoolsHook = ({
   return devtoolsHook;
 };
 
+export const traverseContexts = (
+  fiber: Fiber,
+  selector: (
+    prevValue: { context: React.Context<unknown>; memoizedValue: unknown },
+    nextValue: { context: React.Context<unknown>; memoizedValue: unknown },
+    // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  ) => boolean | void,
+) => {
+  const nextDependencies = fiber.dependencies;
+  const prevDependencies = fiber.alternate?.dependencies;
+
+  if (!nextDependencies || !prevDependencies) return false;
+  if (
+    typeof nextDependencies !== 'object' ||
+    !('firstContext' in nextDependencies) ||
+    typeof prevDependencies !== 'object' ||
+    !('firstContext' in prevDependencies)
+  ) {
+    return false;
+  }
+  let nextContext = nextDependencies.firstContext;
+  let prevContext = prevDependencies.firstContext;
+  while (
+    nextContext &&
+    typeof nextContext === 'object' &&
+    'memoizedValue' in nextContext &&
+    prevContext &&
+    typeof prevContext === 'object' &&
+    'memoizedValue' in prevContext
+  ) {
+    if (selector(nextContext as any, prevContext as any) === true) return true;
+
+    nextContext = nextContext.next;
+    prevContext = prevContext.next;
+  }
+  return true;
+};
+
 export const isHostComponent = (fiber: Fiber) =>
   fiber.tag === HostComponentTag ||
   // @ts-expect-error: it exists
   fiber.tag === HostHoistableTag ||
   // @ts-expect-error: it exists
   fiber.tag === HostSingletonTag;
 
-const seenProps = new WeakMap<any, boolean>();
+const seenProps = new WeakSet<any>();
+const seenContextValues = new WeakMap<
+  Fiber,
+  WeakMap<React.Context<unknown>, unknown>
+>();
 
 export const didFiberRender = (fiber: Fiber): boolean => {
   let nextProps = fiber.memoizedProps;
-  if (!nextProps) return true;
-  if (seenProps.has(nextProps)) return false;
+  const hasSeenProps = seenProps.has(nextProps);
+
   if (nextProps && typeof nextProps === 'object') {
-    seenProps.set(nextProps, true);
+    seenProps.add(nextProps);
   }
 
+  let isContextChanged = false;
+  traverseContexts(fiber, (_prevContext, nextContext) => {
+    const contextMap = seenContextValues.get(fiber) ?? new WeakMap();
+    const seenContextValue = contextMap.get(nextContext.context);
+    if (
+      !contextMap.has(nextContext.context) ||
+      !Object.is(seenContextValue, nextContext.memoizedValue)
+    ) {
+      isContextChanged = true;
+    }
+    contextMap.set(nextContext.context, nextContext.memoizedValue);
+    seenContextValues.set(fiber, contextMap);
+  });
+  if (!isContextChanged && hasSeenProps) return false;
+
   nextProps ??= {};
 
   const prevProps = fiber.alternate?.memoizedProps || {};

src/core/instrumentation/index.ts

@@ -8,6 +8,7 @@ import {
   getSelfTime,
   hasMemoCache,
   registerDevtoolsHook,
+  traverseContexts,
   traverseFiber,
 } from './fiber';
 
@@ -48,10 +49,8 @@ export interface Render {
 
 const unstableTypes = ['function', 'object'];
 
-export const getPropsRender = (fiber: Fiber): Render | null => {
-  const type = getType(fiber.type);
-  if (!type) return null;
-
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const getPropsRender = (fiber: Fiber, type: Function): Render | null => {
   const changes: Change[] = [];
 
   const prevProps = fiber.alternate?.memoizedProps;
@@ -102,39 +101,19 @@ export const getPropsRender = (fiber: Fiber): Render | null => {
   };
 };
 
-export const getContextRender = (fiber: Fiber): Render | null => {
-  const type = getType(fiber.type);
-  if (!type) return null;
-
-  const nextDependencies = fiber.dependencies;
-  const prevDependencies = fiber.alternate?.dependencies;
-
+export const getContextRender = (
+  fiber: Fiber,
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  type: Function,
+): Render | null => {
   const changes: Change[] = [];
 
-  if (!nextDependencies || !prevDependencies) return null;
-  if (
-    typeof nextDependencies !== 'object' ||
-    !('firstContext' in nextDependencies) ||
-    typeof prevDependencies !== 'object' ||
-    !('firstContext' in prevDependencies)
-  ) {
-    return null;
-  }
-  let nextContext = nextDependencies.firstContext;
-  let prevContext = prevDependencies.firstContext;
-  while (
-    nextContext &&
-    typeof nextContext === 'object' &&
-    'memoizedValue' in nextContext &&
-    prevContext &&
-    typeof prevContext === 'object' &&
-    'memoizedValue' in prevContext
-  ) {
-    const nextValue = nextContext.memoizedValue;
+  const result = traverseContexts(fiber, (prevContext, nextContext) => {
     const prevValue = prevContext.memoizedValue;
+    const nextValue = nextContext.memoizedValue;
 
     const change: Change = {
-      name: '$$context',
+      name: '',
       prevValue,
       nextValue,
       unstable: false,
@@ -151,10 +130,9 @@ export const getContextRender = (fiber: Fiber): Render | null => {
     ) {
       change.unstable = true;
     }
+  });
 
-    nextContext = nextContext.next;
-    prevContext = prevContext.next;
-  }
+  if (!result) return null;
 
   return {
     type: 'context',
@@ -181,9 +159,11 @@ export const instrument = ({
     onCommitStart();
 
     const handleFiber = (fiber: Fiber, trigger: boolean) => {
-      if (!fiber || !didFiberRender(fiber)) return null;
-      const propsRender = getPropsRender(fiber);
-      const contextRender = getContextRender(fiber);
+      const type = getType(fiber.type);
+      if (!type) return null;
+      if (!didFiberRender(fiber)) return null;
+      const propsRender = getPropsRender(fiber, type);
+      const contextRender = getContextRender(fiber, type);
       if (!propsRender && !contextRender) return null;
 
       const allowList = ReactScanInternals.componentAllowList;
@@ -233,7 +213,8 @@ export const instrument = ({
     try {
       handleCommitFiberRoot(rendererID, root);
     } catch (err) {
-      /**/
+      // eslint-disable-next-line no-console
+      console.error('[React Scan] Error instrumenting: ', err);
     }
   };
 

src/core/web/index.ts

@@ -1,7 +1,7 @@
 import { recalcOutlines } from './outline';
 import { createElement, onIdle } from './utils';
 
-export const createCanvas = () => {
+export const createOverlay = () => {
   const canvas = createElement(
     `<canvas id="react-scan-overlay" style="position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483646" aria-hidden="true"/>`,
   ) as HTMLCanvasElement;

src/core/web/outline.ts

@@ -5,6 +5,7 @@ import { ReactScanInternals } from '../index';
 import { getLabelText } from '../utils';
 import { isOutlineUnstable, throttle } from './utils';
 import { log } from './log';
+import { recalcOutlineColor } from './perf-observer';
 
 export interface PendingOutline {
   rect: DOMRect;
@@ -29,7 +30,7 @@ export interface PaintedOutline {
 
 export const MONO_FONT =
   'Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace';
-export const PURPLE_RGB = '115,97,230';
+export const colorRef = { current: '115,97,230' };
 
 export const getOutlineKey = (outline: PendingOutline): string => {
   return `${outline.rect.top}-${outline.rect.left}-${outline.rect.width}-${outline.rect.height}`;
@@ -45,6 +46,8 @@ export const getRect = (domNode: HTMLElement): DOMRect | null => {
     return null;
   }
 
+  // if (!document.documentElement.contains(domNode)) return null;
+
   const rect = domNode.getBoundingClientRect();
   const isVisible =
     rect.top >= 0 ||
@@ -135,6 +138,7 @@ export const flushOutlines = (
   ctx: CanvasRenderingContext2D,
   previousOutlines: Map<string, PendingOutline> = new Map(),
   toolbar: HTMLElement | null = null,
+  perfObserver: PerformanceObserver | null = null,
 ) => {
   if (!ReactScanInternals.scheduledOutlines.length) {
     return;
@@ -144,6 +148,10 @@ export const flushOutlines = (
   ReactScanInternals.scheduledOutlines = [];
 
   requestAnimationFrame(() => {
+    if (perfObserver) {
+      recalcOutlineColor(perfObserver.takeRecords());
+    }
+    recalcOutlines();
     void (async () => {
       const secondOutlines = ReactScanInternals.scheduledOutlines;
       ReactScanInternals.scheduledOutlines = [];
@@ -182,7 +190,7 @@ export const flushOutlines = (
         }),
       );
       if (ReactScanInternals.scheduledOutlines.length) {
-        flushOutlines(ctx, newPreviousOutlines, toolbar);
+        flushOutlines(ctx, newPreviousOutlines, toolbar, perfObserver);
       }
     })();
   });
@@ -272,9 +280,9 @@ export const fadeOutOutline = (ctx: CanvasRenderingContext2D) => {
 
   ctx.save();
 
-  ctx.strokeStyle = `rgba(${PURPLE_RGB}, ${maxStrokeAlpha})`;
+  ctx.strokeStyle = `rgba(${colorRef.current}, ${maxStrokeAlpha})`;
   ctx.lineWidth = 1;
-  ctx.fillStyle = `rgba(${PURPLE_RGB}, ${maxFillAlpha})`;
+  ctx.fillStyle = `rgba(${colorRef.current}, ${maxFillAlpha})`;
 
   ctx.stroke(combinedPath);
   ctx.fill(combinedPath);
@@ -295,7 +303,7 @@ export const fadeOutOutline = (ctx: CanvasRenderingContext2D) => {
       const labelX: number = rect.x;
       const labelY: number = rect.y - textHeight - 4;
 
-      ctx.fillStyle = `rgba(${PURPLE_RGB},${alpha})`;
+      ctx.fillStyle = `rgba(${colorRef.current},${alpha})`;
       ctx.fillRect(labelX, labelY, textWidth + 4, textHeight + 4);
 
       ctx.fillStyle = `rgba(255,255,255,${alpha})`;

src/core/web/perf-observer.ts

@@ -0,0 +1,24 @@
+import { ReactScanInternals } from '../../index';
+import { NO_OP } from '../utils';
+import { colorRef } from './outline';
+
+export const createPerfObserver = () => {
+  const observer = new PerformanceObserver(NO_OP);
+
+  observer.observe({ entryTypes: ['longtask'] });
+
+  return observer;
+};
+
+export const recalcOutlineColor = (entries: PerformanceEntryList) => {
+  const { longTaskThreshold } = ReactScanInternals.options;
+  for (let i = 0, len = entries.length; i < len; i++) {
+    const entry = entries[i];
+    // 64ms = 4 frames
+    // If longTaskThreshold is set, we show all "short" tasks, otherwise we hide them
+    if (entry.duration < (longTaskThreshold ?? 50)) continue;
+    colorRef.current = '185,49,115';
+    return;
+  }
+  colorRef.current = '115,97,230';
+};