🛡 How to Build a Bulletproof React Component
Design resilient React components that handle SSR, hydration, portals, composition, and future changes to rendering.
In Building Bulletproof React Components, the author shows that many components only work on the “happy path,” while everything goes according to plan. In reality, though, they face SSR, hydration, portals, asynchronous children, and concurrent rendering, and start falling apart.
The article explores 10 approaches that help make a component resilient to these scenarios.
đź“Ś Key ideas:
- Server-Proof: don’t call browser APIs on the server (SSR); move that work into
useEffect. - Hydration-Proof: to avoid a flash of wrong content, you can inline a script that sets the correct state before hydration.
- Instance-Proof: don’t rely on hard-coded IDs. Use
useIdfor uniqueness. - Composition-Proof: don’t clone children manually. Context is more reliable and works with asynchronous/deferred components.
- Portal-Proof: event listeners need to be attached to the right document (through
ref.current.ownerDocument.defaultView). - Future-Proof: don’t count on
useMemoas persistent storage. React may discard the cache. Critical values are better kept inuseState.
💡 Essentially, this is about a defensive development mindset rather than just a collection of patterns: thinking about every environment your component might live in and designing it so it doesn’t break outside the “ideal” scenario.