Code crimes for good component APIs
summary
Claims a few deliberate hacks make component APIs far easier to use: uses React, SSR and hydration details, and builds a SelectionMenu and NavList that manage state for consumers. Implements child kidnapping by inspecting React children and cloning anchors, uses context fallback, falls back to an isomorphic id plus document.querySelector, and injects a small inline script via dangerouslySetInnerHTML to set defaults before hydration. Works in a closed design system but breaks for general public libs.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 0:48Code vs UI double standards
- 3:13Anchored overlay API problems
- 4:59Selection menu component intro
- 6:26Child kidnapping for SSR
- 7:49SSR lag issue
- 8:35Solving SSR with child kidnapping
- 12:06Nav list component improvements
- 14:10Nav group default open challenge
- 16:18Context-based nav state
- 17:44SSR issues with context
- 18:49Handling Next.js Link and aria-current
- 19:51Isomorphic ID and DOM queries
- 21:15Inline script for faster hydration
- 23:25Conclusion
related talks
44mWriting good components
35mAdvanced patterns in building React Components
18mOff with Their Heads: Rise of the Headless Components
38mWriting highly reusable React components
37mBuilding Better Components — A Journey to a More Resilient Frontend
25mSimply React
34mSecrets of building robust UI components
25mBeautiful Abstractions "What I Learned Reading the Source-Code of 18 React Libraries"