performance

Performance Fix

Systematically find and fix performance issues in $ARGUMENTS (or the whole app if no argument is given). Always measure first — never optimize blindly.

---

Step 1 — Measure baseline before touching anything

Run the production build and capture metrics before making any changes:

pnpm run build
pnpm run preview

Open the app in Chrome and capture:

• Lighthouse score (Performance tab → Run audit)
• React Profiler (React DevTools → Profiler → Record an interaction)
  • Note the components with the longest render times and highest render counts

Record baseline numbers. Every fix must be measured against these.

---

Step 2 — Find and fix unnecessary re-renders

Read the component tree (start from src/App.tsx) and search for these patterns:

grep -rn --include="*.tsx" \
  -E "value=\{\{|onClick=\{\(\)" src/

For each instance found, apply the fix directly:

Inline object/array creation in JSX → wrap with useMemo:

// BAD — new object on every render causes children to re-render
<Chart options={{ color: "red" }} />

// FIX — wrap with useMemo
const chartOptions = useMemo(() => ({ color: "red" }), []);
<Chart options={chartOptions} />

Event handlers recreated on every render → wrap with useCallback:

// BAD
<Button onClick={() => doSomething(id)} />

// FIX — wrap with useCallback
const handleClick = useCallback(() => doSomething(id), [id]);
<Button onClick={handleClick} />

Context that changes on every render → memoize the context value:

// BAD — new object reference every render
<MyContext.Provider value={{ user, sdk }}>

// FIX — memoize the context value
const ctxValue = useMemo(() => ({ user, sdk }), [user, sdk]);
<MyContext.Provider value={ctxValue}>

Apply React.memo to pure presentational components that receive stable props. Do NOT wrap every component — only those confirmed to re-render unnecessarily via the Profiler.

---

Step 3 — Find and fix DMS query patterns