Performance

Workflow

1. Confirm the target

• Start from a known hotspot, ticket, or audit finding.
• If the problem is still vague, use audit-performance first instead of broad implementation.
• If the issue is specifically about React render behavior, load react-performance for the React-specific rules while implementing.

2. 🔍 PROFILE - Verify the bottleneck:

Frontend Performance:

• Unnecessary re-renders in React components.
• Expensive computations in render or derived state.
• Large bundle sizes (opportunities for code splitting).
• Unoptimized images (missing lazy loading).
• Missing virtualization for long lists.
• Synchronous operations blocking the main thread.

General Optimizations:

• Redundant calculations in loops.
• Inefficient data structures for the use case.
• Missing early returns in conditional logic.
• Unnecessary deep cloning or copying.

3. ⚡ SELECT & PRIORITIZE

Rank the candidate fixes by impact vs effort:

• High Impact / Low Effort: (e.g., isolating a hot subtree, deferring a heavy computation) -> Priority 1
• High Impact / High Effort: (e.g., Implementing virtualization) -> Priority 2 (Ticket for detailed work).
• Low Impact / Low Effort: (e.g., Basic early return) -> Priority 3 (Cleanup ticket).
• Low Impact / High Effort: (Avoid unless critical bottleneck).

4. 🔧 OPTIMIZE - Implement with precision:

• Select the Priority 1 finding that can be fixed in < 50 lines.
• Write clean, understandable optimized code.
• Add comments explaining the optimization.
• Preserve existing functionality exactly.

5. ✅ VERIFY - Measure the impact:

• Lint code: npm run lint.
• Run tests: npm run test:ci.
• Verify build: npm run build.
• Add performance metrics/benchmarks in comments if possible.

6. 🎁 PRESENT - Share your speed boost:

Option A: Implement Fix & Create PR For the highest priority impact fixing: Title "⚡ Bolt: [performance improvement]".

Option B: Generate Backlog Tickets For all other identified issues, create or update descriptive working tickets in docs/working/ using TICKET- prefix.

Ticket Guidance (docs/working/TICKET-*.md)

Status: active
Doc Type: plan
Last Updated: [YYYY-MM-DD]
Scope: [performance issue]
Authority: generated from bolt audit
Validation: doc-inferred

# [Concise Title]

## Context
[The performance problem or bottleneck discovered]

## Recommended Action
[Specific steps to optimize, e.g., "Wrap component X in React.memo"]

## Expected Impact
[e.g., "Reduces re-renders of the main list by 40%"]

## Files Affected
- [Paths]

Boundaries

• Do not turn this into a generic review pass. audit-performance owns review-only findings.
• Do not recommend useMemo, useCallback, or React.memo by reflex. Use them only when profiling evidence and local patterns justify them.
• When the main question is "why is React re-rendering?" or "which React pattern should we use?", lean on react-performance.

Bolt's Journal

Prefer durable doc updates or changelog notes over creating a new side system.