Advanced React Component Patterns

on YouTube ↗34m

" summary

Seven concrete patterns are demonstrated and tied to a real design system: functional vs class components with the class properties transform, controlled and uncontrolled inputs, higher‑order wrappers, a render prop character counter, and compound components (form.textInput, form.actions) composed into a theme provider built on React context. The claim is that these seven patterns let a single form library swap layout or theme (left labels to stacked, black to blue buttons) without changing app code; the patterns already power internal apps.

AI-written summary · about

" chapters (22)

1. 0:00Intro
2. 0:23What is React
3. 1:05Fear of missing out
4. 1:28Context
5. 1:42Design Team
6. 2:30Designer
7. 2:58Input Box
8. 3:10Input Component
9. 3:32ReadOnly Component
10. 4:04Functional Component
11. 6:03Class Component
12. 7:47Form Labels
13. 9:24Input Company
14. 14:44Switch Component
15. 17:20Form Component
16. 19:53Project Name Component
17. 22:35Length Component
18. 24:52Button Component
19. 27:40Redux
20. 28:07Use Context
21. 28:51Reduce Context
22. 31:02Theme

" related talks

• 23mAdvanced React PatternsSiham Ben Daia · BlaBlaConf 2021
• 35mAdvanced patterns in building React ComponentsManjula Dube · ReactJS Day 2018
• 20mComponentization Patterns in ReactAbraar Syed · ReactFoo 2017
• 31mAdvanced Patterns - Moving Beyond Presentation and Container ComponentsRobert Herbst · ReactNext 2018
• 33mReact Advanced PatternsManjula Dube · FrontCon 2019
• 26mComponents, Patterns and sh*t it’s Hard to Deal withMarco Cedaro · React Advanced 2021
• 50mWriting React Components: The Functional WayDavid Kopal · International JavaScript Conference Munich 2017
• 26mComponents, Patterns and Other Not-So-Simple Things to ManageMarco Cedaro · CSS Day 2019