1
Course Overview: Advanced React Component Patterns
2m 5s
2
Build a Toggle Component
1m 20s
3
Write Compound Components
1m 46s
4
Make Compound React Components Flexible
2m 14s
5
Validate Compound Component Context Consumers
2m 22s
6
Prevent Unnecessary Rerenders of Compound Components using React Context
1m 37s
7
Use Render Props with React
3m 26s
8
Use Prop Collections with Render Props
1m 6s
9
Use Prop Getters with Render Props
5m 15s
10
Use Component State Initializers
2m 37s
11
Implement Component State Reducers
3m 34s
12
Improve the usability of Component State Reducers with state change types
4m 3s
13
Make Controlled React Components with Control Props
2m 25s
14
Support Control Props for all state
1m 6s
15
Support a state change handler for all control props
6m 16s
16
Improve the usability of Control Props with state change types
4m 46s
17
Implement the Provider Pattern with React Context
5m 21s
18
Implement a Higher Order Component
5m 5s

Implement a Higher Order Component

React^16.3.2
JavaScript

Share this video with your friends

Sometimes you have some boilerplate for components that would be nice to abstract away slightly with a simple helper function. In this lesson we'll learn how to create a "Higher Order Component" which is a component factory function. We'll use it to give a given component a prop for our context value.

Course

React Class Component Patterns

Raquel

~ 6 years ago

Anyone has tried this with Typescript? It's quite hard to define/type the props and the result component :/

Kent C. Doddsinstructor

~ 6 years ago

Tomeu, this is actually one of the reasons that higher order components have fallen out of favor in the community. Generally prefer a render prop over a higher order component :)