$Advanced React Patterns$

Advanced React Patterns

PayPal

3 hours, 23 minutes

Discover how to simplify your large React applications with advanced component patterns! In this course, Kent C. Dodds shows how to separate component logic, state and display properties to make your components more flexible and usable across large React applications. You'll learn patterns like Compound Components, Render Props, Prop Getters, Controlled Props, and how to take advantage of React’s new Context API to share state throughout the application. This course is for developers who have experience building React applications and desire to scale their applications with components that are both simpler and more flexible!

This course and others like it are available as part of our Frontend Masters video subscription.

Published: May 2, 2018

Get Unlimited Access Now

Table of Contents

Introduction

00:00:00 - 00:07:27
Introducing Advanced React Patterns
Kent C. Dodds introduces himself and sets up the expectations for the course. This course is hands-on, filled with exercises for experienced React developers to learn many component patterns. - https://github.com/kentcdodds/advanced-react-patterns-v2
00:07:28 - 00:18:35
Exercises Setup
Kent walks through the setup of course exercises and how to run the tests for the exercises. - https://github.com/paypal/downshift - https://codesandbox.io/s/github/kentcdodds/advanced-react-patterns-v2
00:18:36 - 00:21:51
Toggle Component & Exercise
In this exercise, students create a toggle component. Kent answers a question from a student about tests running in code sandbox.
00:21:52 - 00:29:00
Toggle Component Solution
Kent shows how to use setState and updater functions to change the state and change handlers to notify consumers. Kent answers questions from students.

Compound Components

00:29:01 - 00:34:40
Basic Compound Component & Exercise
Kent shows a compound component and how to pass properties to children components. Also, Kent sets up for the exercise to create a custom compound component.
00:34:41 - 00:46:04
Basic Compound Component Solution
Kent walks through the solution for being able to map over the children elements while passing props to the cloned child element. Kent then creates compound components as static properties on the parent component. He answers questions from students.
00:46:05 - 00:48:49
Flexible Compound Component & Exercise
Showing the limitations of the basic compound components when needing additional nesting, Kent shows that the workaround is through leveraging context to share implicit state.
00:48:50 - 00:59:16
Flexible Compound Component Solution
Using the context API, Kent shows how to make the compound component more flexible with a shared implicit state by using flexible compound components when you have several components. These compound components need to share state, but the user does not need to know about it. Kent takes questions from students.
00:59:17 - 01:04:34
Flexible Compound Component Q&A
Kent answers questions from students about nested context providers.

Render Props

01:04:35 - 01:06:53
Render Prop Component & Exercise
Kent demonstrates that render props serve as components that can control their state logic but allow total flexibility of the UI. The render prop component pattern separates the state component from the display component.
01:06:54 - 01:15:28
Render Prop Component Solution
Kent separates the component into a render property component and a view component that accepts renderable properties. Kent iterates through the steps to create the separation.
01:15:29 - 01:25:53
Render Prop Q&A
Kent answers questions students stating that he prefers the render property pattern over component injection because calling createElement adds an extra layer of nesting. Kent discusses the render prop vs. the compound component use cases. And Kent also states his preference to call the render prop children instead of "render" to be able to see which properties need to be passed more easily, also because the React context API uses children. - https://blog.kentcdodds.com/answers-to-common-questions-about-render-props-a9f84bb12d5d?gi=f7b8be9ec016
01:25:54 - 01:29:20
Prop Collections & Exercise
Kent demonstrates that prop collections are a convenience for frequent use cases of render prop functions.
01:29:21 - 01:31:22
Prop Collections Solution
Providing a prop collection allows people who use your render prop component to understand which properties are needed to render the component.
01:31:23 - 01:35:15
Prop Getters & Exercise
Kent discusses prop getters, which help fix overwriting properties that are intended to be overwritten by composing the properties that should be applied.
01:35:16 - 01:42:23
Prop Getters Solution
Kent walks through the solution by coding the prop getters to wrap the properties and avoid overwriting properties in the component. Afterwards, Kent answers questions from students.

Controlling State

01:42:24 - 01:44:59
State Initializer Pattern & Exercise
Kent discusses how the state initializer pattern allows you to initialize the state and give the component the ability to reset the state.
01:45:00 - 01:47:52
State Initializer Solution
Kent walks through the solution to State Initializer Pattern Exercise by coding the state initializer pattern to allow the component to initialize and reset the state.
01:47:53 - 01:53:17
State Reducer Component & Exercise
The state reducer allows people to control how the state is managed. State reducer hooks into every setState call to modify how the state is updated in the component.
01:53:18 - 02:04:22
State Reducer Component Solution
Kent codes the solution to separate state from modifying state behavior in the component.
02:04:23 - 02:08:27
State Reducers with Change Types & Exercise
Sometimes users need to know what's causing state changes to know whether they need to alter the state changes. Providing a type can help facilitate that.
02:08:28 - 02:15:47
State Reducer Change Types Solution
Kent walks through the State Reducers with Change Types Exercise by coding the component to handle state change using change types.
02:15:48 - 02:21:16
Control Props Primer & Exercise
Control props allows you to pass a property that the component should use for its state.
02:21:17 - 02:26:51
Control Props Primer Solution
Kent walks through the solution to the Control Props Primer Exercise to pass control properties to the component.
02:26:52 - 02:28:31
Control Props & Exercise
Integrate control props with the existing toggle component in a way that's generic to work with more complex components.
02:28:32 - 02:43:34
Control Props Solution
Kent walks through the solution to the Control Props Exercise by changing the generic control props solution to work with more complex components that integrates with state reducer. Kent answers questions from students.

Provider Pattern

02:43:35 - 02:48:16
Provider Pattern & Exercise
Kent introduces the prop drilling problem and how the provider pattern is used to mitigate it.
02:48:17 - 02:55:49
Provider Pattern Solution
Kent walks through the Provider Pattern Exercise by using the React createContext API to make state and helpers available anywhere in the React tree.
02:55:50 - 03:01:08
Higher Order Components & Exercise
Kent explains that higher order components are used to create a component based with certain properties to simplify creating.
03:01:09 - 03:11:33
Higher Order Component Solution
Kent walks through the solution to Higher Order Components Exercise.

Combining Patterns

03:11:34 - 03:15:07
Rendux Exercise
Kent practices implementing patterns with Rendux, which is redux as a render prop.
03:15:08 - 03:24:05
Rendux Solution
After walking through the solution to the Rendux Exercise, Kent wraps the Advanced React Patterns course by thanking the students.

Advanced React Patterns

Introduction

Introducing Advanced React Patterns

Exercises Setup

Toggle Component & Exercise

Toggle Component Solution

Compound Components

Basic Compound Component & Exercise

Basic Compound Component Solution

Flexible Compound Component & Exercise

Flexible Compound Component Solution

Flexible Compound Component Q&A

Render Props

Render Prop Component & Exercise

Render Prop Component Solution

Render Prop Q&A

Prop Collections & Exercise

Prop Collections Solution

Prop Getters & Exercise

Prop Getters Solution

Controlling State

State Initializer Pattern & Exercise

State Initializer Solution

State Reducer Component & Exercise

State Reducer Component Solution

State Reducers with Change Types & Exercise

State Reducer Change Types Solution

Control Props Primer & Exercise

Control Props Primer Solution

Control Props & Exercise

Control Props Solution

Provider Pattern

Provider Pattern & Exercise

Provider Pattern Solution

Higher Order Components & Exercise

Higher Order Component Solution

Combining Patterns

Rendux Exercise

Rendux Solution