Writing good components
summary
Claims that writing good components lets apps scale longer without external state libraries and shares concrete patterns from building a React design system and open‑source libraries: a Button API that avoids conflicting props, a Switch with unified onChange semantics that maps click/keyboard/drag to a single callback, Avatar split into user/resource to avoid the prop‑cliff with five sizes and six variants of buttons, accessibility by default (ARIA IDs, keyboard handling), tests using data attributes like data-testid, and smooth deprecation paths; examples are implemented and shown working.
AI-written summary · about
chapters (18)
- 0:00Intro
- 1:00Who am I
- 1:30The good component
- 2:35What is a good company
- 2:50Writing good components
- 3:29Buttons
- 4:05PrimaryDestructive
- 6:43Switch
- 10:34Minimal API Surface Area
- 11:14Change Consistency
- 11:29User Avatar
- 14:35Prop Clips
- 16:21Avatar
- 16:58Signed Image
- 17:29Badge Component
- 18:06Label Component
- 19:25Content Component
- 20:44Icon Component
related talks
37mBuilding Better Components — A Journey to a More Resilient Frontend
33mThe New Best Practices
51mBuilding Better Components — A Journey to a More Resilient Frontend
46mBuilding Reusable Components ... That Are Actually Reusable
35mAdvanced patterns in building React Components
23mBest Practices for reusable UI components
34mBuilding Accessible Components in React
34mSecrets of building robust UI components