Reducing bugs in a React codebase
summary
Shows concrete fixes: debugging starts with random print statements, React DevTools and browser DevTools, then moves to preventive refactors that drop heavy useState usage to 0.35 useState per component across a codebase of 112 custom hooks and 192 components. Replaces state-without-deps anti-patterns (props-as-initial-state) with useReducer and useMemo and local refs/controlled components, avoids destroy-and-recreate keyed remounts that cause flicker, and enforces single-source-of-truth to stop partial or unexpected renders.
AI-written summary · about
chapters (7)
- 0:00Introduction and background
- 1:00Identifying React anti-patterns
- 2:31Common component bugs
- 3:41React dependency principles
- 5:00Case study of bug patterns
- 9:08Optimizing state management
- 11:09Nesting and conclusion
