Build React components that survive real-world conditions — SSR, hydration, concurrent rendering, portals, transitions, and more. Based on Shu Ding's "Building Bulletproof React Components". Use when writing, reviewing, or refactoring React components to ensure they handle server rendering, hydration mismatches, multiple instances, concurrent features, composition patterns, portals, view transitions, Activity API, data leaks, and cache semantics correctly.
A guide for building React components that survive hostile real-world conditions: server rendering, hydration, concurrent rendering, multiple instances, portals, transitions, and more. Most components are built for the happy path — this skill teaches how to make them survive when someone else uses them in conditions you didn't plan for.
Reference these guidelines when:
| Rule | Impact | File |
|---|---|---|
| Make It Server-Proof | CRITICAL |
server-proof.md| Make It Hydration-Proof | CRITICAL | hydration-proof.md |
| Make It Instance-Proof | HIGH | instance-proof.md |
| Make It Concurrent-Proof | HIGH | concurrent-proof.md |
| Make It Composition-Proof | HIGH | composition-proof.md |
| Make It Leak-Proof | HIGH | leak-proof.md |
| Make It Portal-Proof | MEDIUM | portal-proof.md |
| Make It Transition-Proof | MEDIUM | transition-proof.md |
| Make It Activity-Proof | MEDIUM | activity-proof.md |
| Make It Future-Proof | LOW | future-proof.md |
localStorage, window, or document during render. Use useEffect or inline scripts.useId for uniqueness — Never hardcode element IDs in reusable components.React.cache for deduplication — Wrap async calls in Server Components to avoid duplicate requests.experimental_taintUniqueValue to prevent tokens from leaking to the client.ownerDocument.defaultView — Don't assume window is the correct global in portal/iframe contexts.startTransition — Required for ViewTransition animations.useLayoutEffect to disable styles when Activity hides components.useState for semantic persistence — useMemo is a performance hint, not a correctness guarantee.