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" }} />