Managing React State

By Cory House
This course will teach you how to implement many types of React state including local, global, refs, context, derived, and more. You'll learn how to choose between types of state, how to derive state, and how to share state between components.
Play course overview
Course info
Rating
(127)
Level
Intermediate
Updated
Aug 20, 2020
Duration
5h 5m
Table of contents
Course Overview
Course Overview 2m
Deciding How and When to Declare State
Target Audience and Prerequisites 1m Agenda 0m A Brief History of React State Management 2m Eight Ways to Handle React State 7m JavaScript Data Structures 2m Summary 1m
Managing Local and Remote State
Intro 1m Set up Demo 6m Declaring State with useState 6m The Rules of Hooks 2m Implementing Event Handlers 4m React Developer Tools 1m Implementing Derived State and Exploring When React Renders 5m Fetching and Storing Data Via useEffect 4m Four Ways to Handle API Calls 2m Handling Errors via Error Boundary 6m Handling Loading State 3m Implementing Async/await in useEffect 4m Creating Custom Hooks for Handling Remote State 6m Consuming a Custom Hook 3m Summary 1m
Implementing Routing
Intro 1m Configuring React Router's Entry Point 1m Creating an App Layout 3m Declaring Routes 4m Declaring URL Placeholders 2m Reading URL Placeholders 2m Handling 404s 2m Reading URL Placeholders on the Detail Page 1m Implementing Client-side Nav via Link and NavLink 5m Fetching Based on a URL Parameter 5m Handling 404s on the Detail Page 2m Redirecting via useNavigation 2m Summary 1m
Managing Shared, Derived, and Immutable State
Intro 1m Creating a Shoe Size Select 5m Implementing Derived State 1m Deciding Where to Store State 2m Lifting State 5m Why Immutability? 2m Handling Immutability 6m Implementing Immutable-Friendly Add 5m Displaying Cart Items 3m Implementing Immutable-Friendly Update 4m Implementing Immutable-Friendly Delete 3m Deriving State for Cart Header 5m Lazy Initializing State and Persisting State to localStorage 8m Summary 1m
Implementing Form Validation
Intro 0m Creating Checkout 4m Centralizing Change Handlers And Persisting Events 4m Form Validation Decisions 3m Intro to State Enums 1m Implementing a State Enum On Checkout 3m Saving the Form Submission and Emptying Cart 5m State Enums vs. Finite State Machines 2m Implementing "On-the-fly" Form Validation 7m Tracking Touch for Instant Validation 4m Summary 1m
Managing State via Refs
Intro 1m When to Consider a Ref 2m Implementing Uncontrolled Inputs 6m Controlled vs. Uncontrolled Inputs 1m Avoiding Setting State on Unmounted Components 5m Storing a Previous Value 5m Summary 1m
Managing Complex State with useReducer
Intro 1m Why useReducer? 3m Extracting State Management to UseReducer 4m Handling Unexpected Action Types 1m Handling Add In Reducers 3m Handling Updates In Reducers 2m Consuming Reducers 3m Dispatching Actions 4m useState vs. useReducer 1m Summary 1m
Sharing State and Functions via Context
Intro 1m Why Context? 5m Declaring a Context 1m Declaring a Context Provider 2m Consuming a Context 3m Creating a Provider Component 4m Wrapping the App in a Context Provider 2m Creating a Reusable useContext Hook 2m Consuming Context via a Custom Hook 4m Requiring a Context Provider 2m Summary 1m
Managing State in Class Components
Intro 1m Class Components vs Function Components 3m Sharing Logic and Consuming Hooks - Option 1: Pass via Props 4m Declaring State 2m Deriving State 2m Setting State 4m Destructuring and Deriving State in Render 3m Binding to This via Arrow Functions in Class Fields 3m Sharing Logic and Consuming Hooks - Option 2: Custom Wrapper 6m Sharing Logic and Consuming Hooks - Option 3: Render Prop 1m Consuming a Render Prop 3m Sharing Logic and Consuming Hooks - Option 4: Function as Child 2m Consuming a Single Context via contextType 2m Consuming Multiple Contexts 2m Summary 1m
Managing State via Third Party Libraries
Intro 1m How to Run the Demos 1m Local State 1m Global State 3m Server State 4m Immutable State 2m Form State 1m Summary: How to Handle State 1m Recommended Exercises 1m
Description
Course info
Rating
(127)
Level
Intermediate
Updated
Aug 20, 2020
Duration
5h 5m
Description

There are many types of state. In this course, Managing React State, you’ll learn how to effectively declare state to create rich, interactive React apps. First, you’ll discover eight ways to handle state in React apps. Next, you’ll explore how to manage each of these types of states including route state, component state, and refs in both function and class components. Finally, you’ll learn when to consider global state via context and third party state libraries. When you’ve finished this course, you’ll have the skills to build complex, interactive React apps in the real world.

About the author
Cory House
About the author

Cory is an independent consultant with over 15 years of experience in software development. He is the principal consultant at reactjsconsulting.com and a Microsoft MVP.

More from the author
Building a JavaScript Development Environment
Beginner
4h 54m
Mar 16, 2021
React: The Big Picture
Beginner
1h 10m
May 11, 2020
More courses by Cory House
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi, I'm Corey House, and welcome to my course, Managing React State. I'm the founder and principal consultant of ReactJSConsulting.com. React apps aren't just read‑only, they're interactive. So a typical React app declares literally dozens of pieces of state, and in React there's a surprising number of options for effectively handling this state, including plain state, refs, context, reducers, web storage, hooks, and more. In this course, we're going to build a realistic online store using modern state management approaches. Some of the key topics that we'll cover include patterns for declaring, setting, and reliably deriving state, sharing data and logic between components, managing loading, error, and form validation state, tracking un‑rendered state and server state, and, most importantly, how to choose between these different state management approaches. By the end of this course, you'll know how to use a variety of React state management approaches and you'll understand when each makes sense. You'll be prepared to build complex, interactive React apps using modern techniques. Before beginning the course, you should be familiar with React fundamentals such as function components, JSX, and props. I hope you'll join me on this journey to learn modern React state management techniques with the Managing React State course, at Pluralsight.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT