Advanced React Patterns
This course still contains valuable patterns in React, but doesn't cover React Hooks introduced in React 1.16.
Table of Contents
Introducing Advanced React PatternsKent 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 SetupKent walks through the setup of course exercises and how to run the tests for the exercises.
Toggle Component & ExerciseIn this exercise, students create a toggle component. Kent answers a question from a student about tests running in code sandbox.
Toggle Component SolutionKent shows how to use setState and updater functions to change the state and change handlers to notify consumers. Kent answers questions from students.
Basic Compound Component & ExerciseKent 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 SolutionKent 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 & ExerciseShowing 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 SolutionUsing 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&AKent answers questions from students about nested context providers.
Render Prop Component & ExerciseKent 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 SolutionKent 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&AKent 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 & ExerciseKent demonstrates that prop collections are a convenience for frequent use cases of render prop functions.
Prop Collections SolutionProviding a prop collection allows people who use your render prop component to understand which properties are needed to render the component.
Prop Getters & ExerciseKent discusses prop getters, which help fix overwriting properties that are intended to be overwritten by composing the properties that should be applied.
Prop Getters SolutionKent 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.
State Initializer Pattern & ExerciseKent discusses how the state initializer pattern allows you to initialize the state and give the component the ability to reset the state.
State Initializer SolutionKent 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 & ExerciseThe 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 SolutionKent codes the solution to separate state from modifying state behavior in the component.
State Reducers with Change Types & ExerciseSometimes 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 SolutionKent walks through the State Reducers with Change Types Exercise by coding the component to handle state change using change types.
Control Props Primer & ExerciseControl props allows you to pass a property that the component should use for its state.
Control Props Primer SolutionKent walks through the solution to the Control Props Primer Exercise to pass control properties to the component.
Control Props & ExerciseIntegrate control props with the existing toggle component in a way that's generic to work with more complex components.
Control Props SolutionKent 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 & ExerciseKent introduces the prop drilling problem and how the provider pattern is used to mitigate it.
Provider Pattern SolutionKent 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 & ExerciseKent explains that higher order components are used to create a component based with certain properties to simplify creating.
Higher Order Component SolutionKent walks through the solution to Higher Order Components Exercise.