react-render-profiling

스타10

포크6

업데이트2026년 4월 27일 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.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

출처

mako-ai

mako-ai/mako

GitHub 저장소 열기 Creator 저장소 보기

다운로드

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.

이 저장소의 다른 Skills

같은 저장소

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.