react-render-profiling

Stars10

Forks6

UpdatedApril 27, 2026 at 13:03

Investigate React render performance in the Mako app using React Scan, render-debug logs, and existing memoization contracts. Use when profiling render churn, slow chat streaming, Monaco console responsiveness, explorer/result table lag, or when the user mentions React Scan.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

mako-ai

mako-ai/mako

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	react-render-profiling
description	Investigate React render performance in the Mako app using React Scan, render-debug logs, and existing memoization contracts. Use when profiling render churn, slow chat streaming, Monaco console responsiveness, explorer/result table lag, or when the user mentions React Scan.

React Render Profiling

Quick Start

Use this workflow for frontend render-performance investigations in app/:

Start the frontend profiler:
```
pnpm run app:dev:scan
```
Open http://localhost:5173 and reproduce the interaction.
Watch React Scan overlays for re-render hotspots.
Check browser console logs prefixed with [render-debug] for why instrumented components changed.
Patch the smallest unstable boundary, then verify with focused tests plus app lint/typecheck.

Instrumentation

VITE_REACT_SCAN=true enables the React Scan Vite plugin.
VITE_RENDER_DEBUG=true enables Mako's renderDebug helpers.
Normal pnpm run app:dev keeps both off. Do not make profiling instrumentation active by default.

Mako Hot Paths

Prioritize these areas when render churn appears:

app/src/components/Chat.tsx: streaming messages, tool cards, input area.
app/src/components/StreamingToolCard.tsx: terminal tool-card memo comparator and expandable previews.
app/src/components/ResourceTree.tsx: stable callbacks from explorers and tree props.
app/src/components/Editor.tsx and Console.tsx: Monaco tab/panel re-renders.
app/src/components/ResultsTable.tsx: stable grid props and result view resets.
app/src/store/consoleStore.ts: avoid no-op Zustand writes that still notify subscribers.

Rules

Keep useChat({ experimental_throttle: 50 }) in Chat.tsx.
Avoid selectors that return fresh objects/arrays in hot components unless wrapped with useShallow.
For callback-only dynamic values, prefer refs or useConsoleStore.getState() at invocation time over object dependencies.
Do not replace use-stick-to-bottom with a useEffect([messages]) scroll implementation.
Keep debug hooks and React Scan gated by env flags.

Verification

For chat/render-boundary changes, run:

pnpm --filter app exec vitest run src/components/__tests__/Chat.perf.test.ts
pnpm --filter app run typecheck
pnpm --filter app run lint

Add focused tests for any new comparator or truncation behavior that could silently regress.

More from this repository

same repository

apps

mako-ai/mako

Load when building, editing, or debugging Mako React apps — app files, npm dependencies, data bindings, the @mako/app-sdk hooks (useQuery / useDuckDB / useLocation / useSearchParams / navigate), URL state and shareable deep links, materialized Parquet/DuckDB bindings, and the live preview runtime.

2026-08-0110

dbt-git-workflow

mako-ai/mako

Load for dbt branches, commits, pushes, pull requests, merges, repository sync, or branch cleanup.

2026-07-2810

dbt-jobs

mako-ai/mako

Load when creating, editing, scheduling, running, or debugging dbt jobs and production deployments.

2026-07-2810

dbt

mako-ai/mako

Load when building, editing, running, or debugging dbt models, dbt projects, schema.yml tests, sources, seeds, snapshots, incremental models, materializations, or dbt jobs in the Transforms section.

2026-07-2710

flows

mako-ai/mako

Load when creating, editing, configuring, validating, or debugging database sync flows, connector flows, pagination, incremental sync, destination mappings, and flow form fields.

2026-07-2210

add-mcp-preset

mako-ai/mako

Add a new MCP server preset (connector) to Mako's MCP client system — server URL, auth model (OAuth DCR, pre-registered app, or API key), scopes, icon, tests, and docs. Use when connecting a new external MCP server (like Slack or Close CRM) or changing how MCP connections authenticate.

2026-07-1410

name	react-render-profiling
description	Investigate React render performance in the Mako app using React Scan, render-debug logs, and existing memoization contracts. Use when profiling render churn, slow chat streaming, Monaco console responsiveness, explorer/result table lag, or when the user mentions React Scan.

React Render Profiling

Quick Start

Use this workflow for frontend render-performance investigations in app/:

Start the frontend profiler:
```
pnpm run app:dev:scan
```
Open http://localhost:5173 and reproduce the interaction.
Watch React Scan overlays for re-render hotspots.
Check browser console logs prefixed with [render-debug] for why instrumented components changed.
Patch the smallest unstable boundary, then verify with focused tests plus app lint/typecheck.

Instrumentation

VITE_REACT_SCAN=true enables the React Scan Vite plugin.
VITE_RENDER_DEBUG=true enables Mako's renderDebug helpers.
Normal pnpm run app:dev keeps both off. Do not make profiling instrumentation active by default.

Mako Hot Paths

Prioritize these areas when render churn appears:

app/src/components/Chat.tsx: streaming messages, tool cards, input area.
app/src/components/StreamingToolCard.tsx: terminal tool-card memo comparator and expandable previews.
app/src/components/ResourceTree.tsx: stable callbacks from explorers and tree props.
app/src/components/Editor.tsx and Console.tsx: Monaco tab/panel re-renders.
app/src/components/ResultsTable.tsx: stable grid props and result view resets.
app/src/store/consoleStore.ts: avoid no-op Zustand writes that still notify subscribers.

Rules

Keep useChat({ experimental_throttle: 50 }) in Chat.tsx.
Avoid selectors that return fresh objects/arrays in hot components unless wrapped with useShallow.
For callback-only dynamic values, prefer refs or useConsoleStore.getState() at invocation time over object dependencies.
Do not replace use-stick-to-bottom with a useEffect([messages]) scroll implementation.
Keep debug hooks and React Scan gated by env flags.

Verification

For chat/render-boundary changes, run:

pnpm --filter app exec vitest run src/components/__tests__/Chat.perf.test.ts
pnpm --filter app run typecheck
pnpm --filter app run lint

Add focused tests for any new comparator or truncation behavior that could silently regress.