Advanced patterns in building React Components
summary
Shows concrete patterns and working tradeoffs: Context API based flexible compound components fix the “extra div breaks children” bug by giving each child its own context; prop-gators let a parent merge supplied handlers with internal defaults so overrides don’t require manual extraction; a state reducer pattern models state updates like Redux so multiple reducers and UI/logic separation work cleanly; render-props avoid HOC prop collisions; a demo repo and CodeSandbox examples run; using function form of setState and the why-did-you-update tool prevents stale state and noisy re-renders.
AI-written summary · about
chapters (8)
- 0:00Start
- 8:31FLEXIBLE COMPOUND COMPONENTS
- 9:01BETTER VERSION OF COMPOUND COMPONENTS
- 14:51ADVANTAGE
- 22:35THE PROVIDER PATTERN
- 22:46Prop Drilling
- 24:05BEST PRACTICES
- 30:18Runtime type checking with props
related talks
34mAdvanced React Component Patterns
31mAdvanced Patterns - Moving Beyond Presentation and Container Components
33mReact Advanced Patterns
23mAdvanced React Patterns
28mThe State of React State in 2019
20mComponentization Patterns in React
25mSimply React
37mBuilding Better Components — A Journey to a More Resilient Frontend