Secrets of building robust UI components
summary
Practical recipe for durable React components: use deterministic tooling like eslint-config-banana and import/format plugins including prettier-plugin-tailwindcss, build components in isolation with Storybook, and validate runtimes with Zod. Prefer string-union props over many booleans, expose minimal APIs (ban className/style), adopt compound and polymorphic patterns, and use generics or overloads for strict types. Enable TypeScript strictness and noUncheckedIndexedAccess to catch edge cases early. Examples include auto-sorted imports and a minimal primitive component pattern that keeps renders flat.
AI-written summary · about
chapters (6)
- 0:00Start
- 0:04Secrets of building robust
- 13:13Component Driven Development
- 20:51Reuse existing types and interfaces
- 25:41Overload function components
- 26:16type vs interface in React component props
related talks
44mA Practical Guide for Crafting Resilient UI Components
37mBuilding Better Components — A Journey to a More Resilient Frontend
40mCompassionate Components
38mWriting highly reusable React components
44mWriting good components
46mBuilding Reusable Components ... That Are Actually Reusable
51mBuilding Better Components — A Journey to a More Resilient Frontend
18mTypeScript Patterns For Better React Components