Less Is More: Designing Lean React Component Interfaces for Maximum Impact
summary
Mattermost runs both web and React Native apps and applies a concrete claim: keep component props to a Minimum Viable Interface so tests, refactors, and swaps cost less. Examples: an input with both error and errorMessage creates an impossible state; HTML buttons expose 100+ props while material UI documents ~17. Strategy used is to wrap libraries so swapping a button library changes one file. Reported result: fewer props, fewer test combinations, easier replacements.
AI-written summary · about
chapters (9)
- 0:00Lean React interfaces
- 3:39Minimum Viable Interface
- 11:29Business vs library code
- 15:26MVI design principles
- 24:38Why libraries matter
- 28:13Avoiding impossible states
- 30:44Context management
- 32:49MVI trade-offs
- 36:49Q&A
related talks
25mSimply React
44mWriting good components
23mBest Practices for reusable UI components
37mBuilding Better Components — A Journey to a More Resilient Frontend
24mDesigning Components for Fun, Profit and Sanity
28mThe State of React State in 2019
34mSecrets of building robust UI components
28mMastering React Component Library Optimization