This course still contains valuable patterns in React, but doesn't cover React Hooks introduced in React 1.16.
Table of Contents
Introduction
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.
Exercises Setup
Kent walks through the setup of course exercises and how to run the tests for the exercises.
Toggle Component & Exercise
In this exercise, students create a toggle component. Kent answers a question from a student about tests running in code sandbox.
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
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.
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.
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.
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.
Flexible Compound Component Q&A
Kent answers questions from students about nested context providers.
Render Props
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.
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.
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.
Prop Collections & Exercise
Kent demonstrates that prop collections are a convenience for frequent use cases of render prop functions.
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.
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.
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
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.
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.
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.
State Reducer Component Solution
Kent codes the solution to separate state from modifying state behavior in the component.
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.
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.
Control Props Primer & Exercise
Control props allows you to pass a property that the component should use for its state.
Control Props Primer Solution
Kent walks through the solution to the Control Props Primer Exercise to pass control properties to the component.
Control Props & Exercise
Integrate control props with the existing toggle component in a way that's generic to work with more complex components.
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
Provider Pattern & Exercise
Kent introduces the prop drilling problem and how the provider pattern is used to mitigate it.
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.
Higher Order Components & Exercise
Kent explains that higher order components are used to create a component based with certain properties to simplify creating.
Higher Order Component Solution
Kent walks through the solution to Higher Order Components Exercise.
