Compassionate Components
summary
Concrete rules for better React components: prefer a variant enum over boolean flags to avoid impossible states; expose an as prop to preserve semantics (card → link) and spread remaining props while merging className; provide JSDoc plus a Docz site and dev‑only console warnings for up‑to‑date docs; use eslint and TypeScript for static safety; write broad integration tests with React Testing Library and avoid implementation‑detail unit tests; compose small pieces and supply a default wrapper that covers 90–95% of use cases.
AI-written summary · about
chapters (17)
- 0:00Start
- 0:36Categories of Terribleness
- 5:26What Makes Good Components Good
- 7:18Api Traits
- 7:46Error Messages
- 11:42Modal Component
- 14:31Card Component
- 15:35Implementation of a Card Component
- 18:17Caveats
- 23:07Documentation
- 24:35Jsdoc
- 26:10Documentation Website
- 30:11Build Trust
- 31:36Build Trust in Your Components
- 35:25Avoid Testing Implementation Details
- 35:51React Testing Library
- 36:03Test Your Components Only through Their Props
related talks
34mSecrets of building robust UI components
25mSimply React
44mWriting good components
51mBuilding Better Components — A Journey to a More Resilient Frontend
42mClean Code vs. Dirty Code: React Best Practices
30mThe how's and why's of flexible React components
37mLess Is More: Designing Lean React Component Interfaces for Maximum Impact
32mRefactoring React