Dumber Components, Smarter Development
summary
Builds a React type-ahead from scratch that exposes four subcomponents (input, results list, result, container) and keeps navigation, selection and highlighting in the outer component so children remain pure components. Demonstrates keyboard navigation, click selection, grouped results by county, a nested Utah→Nevada fallback, and a naive cache left to the app. Code is on GitHub, demo works live but is not production-ready, accessibility is considered partially implemented, and the overall claim is that dumb components enable safer, more composable UIs.
AI-written summary · about
chapters (10)
- 0:00Introduction and juggling demo
- 5:10Problem with overloaded components
- 7:00Essential features of a type-ahead
- 10:25Building the type-ahead structure
- 16:32Adding keyboard navigation
- 23:42Making results selectable
- 28:56Implementing search functionality
- 32:14Grouping results by county
- 35:10Nested type-ahead example
- 39:12Q&A and closing remarks
related talks
25mSimply React
51mBuilding Better Components — A Journey to a More Resilient Frontend
26mSo You Think You Can Build A Dropdown?
33mVanilla React/Redux components
35mBuilding reusable UI libraries with React
24mDesigning Components for Fun, Profit and Sanity
38mWriting highly reusable React components
17mLosing your Components’ Head