React Rendering Issues
Overview
This playbook covers double renders, stale UI, hydration errors, and infinite render loops.
Why It Matters
Rendering problems are common in React and often masquerade as data or API bugs.
Core Concepts
- Rendering follows state and props.
- Effects are not a substitute for render logic.
- Hydration must match server and client output.
Mental Models
When the UI looks wrong, check state derivation, effect usage, and server/client differences.
Best Practices
- Derive state in render when possible.
- Avoid unnecessary effects.
- Confirm hydration and client-only assumptions.
Common Mistakes
- Syncing derived values through effects.
- Triggering render loops.
- Assuming server and client outputs are identical.
Trade-offs
Cleaner render logic can require more upfront thought, but it usually makes the UI more predictable.
Decision Framework
| Symptom | Check |
|---|---|
| Infinite re-render | State updates during render or effect loop |
| Hydration mismatch | Server/client output divergence |
| Stale UI | Derived state or dependency issues |
Examples
- A 200 response with stale UI often means React state mapping or render logic, not the API.
Checklists
- Is state derived or duplicated?
- Are effects truly necessary?
- Does server output match client output?
Senior Engineer Notes
Senior engineers treat render issues as data flow issues first. That usually gets them to the fix faster than inspecting styling.