React Bulletproof Components

Use this skill to turn fragile component code into robust patterns that survive common evolution paths.

Workflow

1. Identify likely failure modes from the request (state growth, async callbacks, nesting, remounts, perf).
2. Apply the matching "-proof" patterns from references/bulletproof-react-components.md.
3. Prefer semantic clarity first (correctness, maintainability), then optimize performance.
4. Explain tradeoffs briefly when choosing between competing patterns.
5. Keep implementation minimal: add only the hardening needed for realistic risk.

Pattern Selection

Use this map to choose quickly:

• Naming collisions across instances or sibling subcomponents: collision-proof
• Complex UI flow with explicit statuses/transitions: context-switch-proof
• Props changing after mount causing state reset/drift: dep-change-proof
• Multiple updates in one event causing wrong totals: stale-state-proof
• Async handlers/timers using outdated state: