Unleash the power of the higher-order components

on YouTube ↗38m

" summary

A concrete recipe for extracting UI from behavior: convert a combined list component into a small presentational renderer plus composable HOCs, implemented both as handwritten HOCs and with the recompose helpers withTransformProps, branch, withState and withHandlers. The composition uses compose to layer logic, a condition that treats arrays of two or fewer items as a warning, and cached handlers so toggle callbacks are not recreated; the result is reusable components and working enhancements.

AI-written summary · about

" chapters (11)

1. 0:00Start
2. 1:19Who Programs in React
3. 2:09Agenda
4. 12:02Making Components Reusable
5. 12:48Make Our Higher-Order Component Reusable
6. 18:57Example of Functional Composition
7. 19:42Composition of Higher-Order Components
8. 20:20Conditioned List
9. 24:56Functional Programming Composer
10. 28:26Predefined Higher-Order Components
11. 36:05Higher-Order Components for Data Fetching

" related talks

• 30mRecomposing your React applicationAndrew Clark · ReactEurope 2016
• 50mWriting React Components: The Functional WayDavid Kopal · International JavaScript Conference Munich 2017
• 42mUnderstanding Recompose through examplesOlena Sovyn · Frontend fwdays'17
• 32mHigher Order ComponentsMiguel Camba · EmberConf 2017
• 30mCompose All the ThingsThomas Sojka · ReactiveConf 2018
• 25mSimply ReactKent C. Dodds · React Rally 2018
• 33mCompositionNik Graf, Max Stoiber · ReactEurope 2017
• 39mRe-Compose your UI: building an atomic design libraryTatiana Irene, Giuseppe Scabellone · droidcon Italy 2022