Composable components using React Context
summary
Shows a concrete implementation: a tabs component that uses tabs provider composable API and builds both a default copy‑paste version and a custom composable version. Uses React useReducer with hooks and exposes two contexts (state + dispatch) to avoid unnecessary re-renders. Demonstrates label-based tab selection, defaultActive behavior, and click dispatches; the demo runs and switches tabs. References Material UI usage at scale (65k GitHub stars, ~300k downloads/day, ~6M/month) to justify approach.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 1:19What we will cover today
- 2:00Reusable UI components today
- 4:45Property drilling problems
- 5:48Module-based workarounds
- 8:18Need for composable components
- 9:45React Context overview
- 11:09Requirements for tabs
- 13:18Demos and code
- 17:31Tabs context and provider
- 22:28Default tabs implementation
- 23:37Error handling and state
- 23:58Stateless tab component
- 25:44Public API in tab scaler
- 26:27Rendering active tab content
- 27:10Separate contexts for state and API
- 28:11Material UI tabs exploration
- 28:53Other Context libraries
- 29:37When to use Context
related talks
20mLosing your Components’ Head
17mLosing your Components’ Head
35mBuilding reusable UI libraries with React
35mHandling Large-Scale State Management with Context and Hooks
22mPowering Code Reuse with Context and Render Props
35mAdvanced patterns in building React Components
25mSimply React
06mContext in React