bulletproof-react-components

name	bulletproof-react-components
description	Build bulletproof React components that survive SSR, hydration, concurrent rendering, portals, transitions, and future React changes. Nine essential patterns from Shu Ding's guide. Use when writing reusable React components, fixing hydration mismatches, handling SSR edge cases, or building component libraries.

Bulletproof React Components

Nine patterns that ensure React components survive real-world conditions beyond the happy path — SSR, hydration, concurrent rendering, portals, and more.

Source: shud.in/thoughts/build-bulletproof-react-components

How It Works

1. When writing or reviewing a reusable React component, consult the Quick Rules below
2. For code examples and deeper explanation, read ./references/patterns.md
3. Run through the Checklist before shipping

Quick Rules

#	Pattern	Rule
1	Server-Proof	Never call browser APIs (localStorage, window, document) during render. Use useEffect.
2	Hydration-Proof	Inject a synchronous inline <script> to set client-dependent values before React hydration.
3	Instance-Proof	Use useId() for all generated IDs. Never hardcode IDs in reusable components.
4	Concurrent-Proof	Wrap server data-fetching in to deduplicate calls per request.