Higher Order Components with Functional Patterns Using Recompose

Watch User Created Playlist (15)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Write a Higher Order Component from Scratch

P

Compose Multiple Higher Order Components Together using Recompose

P

Add Local State to a Functional Stateless Component using Recompose

P

Add Local State with Redux-like Reducers using Recompose

P

Add Lifecycle Hooks to a Functional Stateless Component using Recompose

P

Transform Props by using the Recompose mapProps Higher Order Component

P

Lock Props by using the Recompose withProps Higher Order Component

P

Flatten a Prop using Recompose

P

Show a Spinner While a Component is Loading using Recompose

P

Show Error Messages based on Non-Optimal States with Recompose

P

Render Components Based on Predicates in Recompose

P

Set the HTML Tag of a Component via a Prop using Recompose

P

Optimize Expensive Computations in Recompose

P

Optimize Component Rendering using Recompose

P

Learn How Recompose Optimizes Higher Order Components

P
react tutorial about Write a Higher Order Component from Scratch

Write a Higher Order Component from Scratch

3:15 react PRO

Learn the proper patterns for writing a higher order component from scratch.

react tutorial about Compose Multiple Higher Order Components Together using Recompose

Compose Multiple Higher Order Components Together using Recompose

3:46 react PRO

Learn how to use the 'compose' function to mix together HOCs, even ones from other libraries like 'connect' from redux.

react tutorial about Add Local State to a Functional Stateless Component using Recompose

Add Local State to a Functional Stateless Component using Recompose

6:21 react PRO

Learn how to use the 'withState' and 'withHandlers' higher order components to easily add local state to—and create a reusable local state pattern for—your functional stateless components. No need for classes!

react tutorial about Add Local State with Redux-like Reducers using Recompose

Add Local State with Redux-like Reducers using Recompose

2:36 react PRO

Learn how to use the 'withReducer' higher order component using the alternative reducer form. If you like using reducers in redux, you’ll be able to reuse that same technique but for local state.

react tutorial about Add Lifecycle Hooks to a Functional Stateless Component using Recompose

Add Lifecycle Hooks to a Functional Stateless Component using Recompose

2:56 react PRO

Learn how to use the 'lifecycle' higher-order component to conveniently use hooks without using a class component.

react tutorial about Transform Props by using the Recompose mapProps Higher Order Component

Transform Props by using the Recompose mapProps Higher Order Component

2:49 react PRO

Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its props). 'mapProps' takes incoming props and changes them however you’d like; for example, filtering the props by a field.

react tutorial about Lock Props by using the Recompose withProps Higher Order Component

Lock Props by using the Recompose withProps Higher Order Component

2:32 react PRO

Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden.

react tutorial about Flatten a Prop using Recompose

Flatten a Prop using Recompose

1:10 react PRO

Learn how to use the ‘flattenProp’ higher order component to take a single object prop and spread each of its fields out as a prop.

react tutorial about Show a Spinner While a Component is Loading using Recompose

Show a Spinner While a Component is Loading using Recompose

2:48 react PRO

Learn how to use the 'branch' and 'renderComponent' higher-order components to show a spinner while a component loads.

react tutorial about Show Error Messages based on Non-Optimal States with Recompose

Show Error Messages based on Non-Optimal States with Recompose

4:34 react PRO

Learn how to use the ‘branch’ and ‘renderComponent’ higher-order components to show errors or messaging when your component is in a non-optimal state. Avoid putting extraneous logic to show errors or messaging into your core component by organizing your non-optimal states into custom higher-order components.

react tutorial about Render Components Based on Predicates in Recompose

Render Components Based on Predicates in Recompose

1:43 react PRO

Learn how to use the ‘branch’ and ‘renderNothing’ higher-order
components to render nothing when a certain prop condition is
met. Sometimes you only want to render a component when valid
props exist or are in a certain condition; ‘renderNothing’ is
an easy way to completely remove the component when you don’t
need to show it.

react tutorial about Set the HTML Tag of a Component via a Prop using Recompose

Set the HTML Tag of a Component via a Prop using Recompose

2:33 react PRO

Learn how to user the ‘componentFromProp’ helper and ‘defaultProps’ higher order component to swap the underlying html tag of your component. Sometimes we want a component to behave the same overall but to use a different element in the HTML output. An example is swapping an for a or even a react router depending on circumstance.

react tutorial about Optimize Expensive Computations in Recompose

Optimize Expensive Computations in Recompose

1:33 react PRO

Learn how to use the 'withPropsOnChange' higher order component to help ensure that expensive prop computations are only executed when necessary. Simply specify which props are “expensive” and provide a factory function for those props.

react tutorial about Optimize Component Rendering using Recompose

Optimize Component Rendering using Recompose

6:14 react PRO

Learn how and when to use the ‘pure’, ‘onlyUpdateForKeys’,
‘onlyUpdateForPropTypes’, and ‘shouldUpdate’ higher order components.
Each one provides a certain granularity of control over prevent
unnecessary renders. Learn how they build upon each other to provide
different options.

react tutorial about Learn How Recompose Optimizes Higher Order Components

Learn How Recompose Optimizes Higher Order Components

3:36 react PRO

Learn about optimizations (like component squashing) that Recompose uses behind the scenes. More reading on Performance.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?