Building Better Components — A Journey to a More Resilient Frontend
summary
Real production code shows that using TypeScript unions to group props into categories stops interfaces from bloating when sizes or themes multiply, and replacing paired flags with a single data prop removes redundant booleans. Components extend native elements to extend native HTML attributes so events and children behave as expected, avoiding one-off button V2s. A React pattern builds a component store hook (usePopoverMenu) that returns a shared store for trigger and popover, keeping state, refs and accessibility logic in sync across files.
AI-written summary · about
chapters (14)
- 0:00🚀 Welcome and Introduction
- 1:30The Importance of Resilient Components
- 3:00Key Strategies for Managing TypeScript Interfaces
- 5:00Grouping Similar Props to Simplify Components
- 8:00Applying Categories to Component Props for Flexibility
- 10:30Consistency in Naming and Design Across Components
- 13:00How Consistent Patterns Can Improve Developer Experience
- 16:00Collaborating Across Teams to Build Consistent UI
- 19:00The Pitfalls of Re-inventing HTML in Custom Components
- 22:00Leveraging TypeScript to Extend Native HTML Attributes
- 25:00React Convention: Building Components with Component Stores
- 28:00Synchronizing UI Components with Shared Stores in React
- 31:00Creating Flexible and Accessible UI with Component Stores
- 34:00Final Thoughts: The Role of Trust and Collaboration in Component Design
related talks
34mSecrets of building robust UI components
18mTypeScript Patterns For Better React Components
35mAdvanced patterns in building React Components
44mWriting good components
15mTypeScript Patterns for Better React Components
44mA Practical Guide for Crafting Resilient UI Components
42mTypeScript Patterns for Better React Components
28mBuilding Considerate React Component APIs with TypeScript