Best Practices for reusable UI components
summary
Advocates building reusable UI components in React that are self-sufficient: they accept data as props, keep interaction in internal state, and notify parents via explicit callbacks instead of spread backdoors. A real example is Netflix’s back‑of‑the‑box component Bob, implemented with JSX, prop validation and documentation via prop types and gulp‑react‑docs. Teams at Admiral and AdRoll consolidate duplicates into a shared library, keeping components 100% size‑aware and easy to drop into different frameworks.
AI-written summary · about
chapters (7)
- 0:00Start
- 10:10Self-sufficiency: Don't worry about data.
- 10:58Self-sufficiency: Enough state to be useful
- 14:37Ease of integration: Self-documentation.
- 16:47Ease of integration: Fewer props.
- 19:41Ease of integration: Remove backdoors.
- 21:17Ease of integration: Fill container element.
related talks
46mBuilding Reusable Components ... That Are Actually Reusable
30mReusability: Sharing Components
43mHow to build your reusable UI component library like a pro
44mWriting good components
38mWriting highly reusable React components
33mThe New Best Practices
35mBuilding reusable UI libraries with React
37mBuilding Better Components — A Journey to a More Resilient Frontend