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
(16)
Level
Intermediate
Updated
Aug 20, 2020
Duration
5h 5m
Table of contents
Course Overview
Course Overview 2m
Deciding How and When to Declare State
A Brief History of React State Management 2m Agenda 0m Eight Ways to Handle React State 7m JavaScript Data Structures 2m Summary 1m Target Audience and Prerequisites 1m
Managing Local and Remote State
Consuming a Custom Hook 3m Creating Custom Hooks for Handling Remote State 6m Declaring State with useState 6m 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 Implementing Derived State and Exploring When React Renders 5m Implementing Event Handlers 4m Intro 1m React Developer Tools 1m Set up Demo 6m Summary 1m The Rules of Hooks 2m
Implementing Routing
Configuring React Router's Entry Point 1m Creating an App Layout 3m Declaring Routes 4m Declaring URL Placeholders 2m Fetching Based on a URL Parameter 5m Handling 404s 2m Handling 404s on the Detail Page 2m Implementing Client-side Nav via Link and NavLink 5m Intro 1m Reading URL Placeholders 2m Reading URL Placeholders on the Detail Page 1m Redirecting via useNavigation 2m Summary 1m
Managing Shared, Derived, and Immutable State
Creating a Shoe Size Select 5m Deciding Where to Store State 2m Deriving State for Cart Header 5m Displaying Cart Items 3m Handling Immutability 6m Implementing Derived State 1m Implementing Immutable-Friendly Add 5m Implementing Immutable-Friendly Delete 3m Implementing Immutable-Friendly Update 4m Intro 1m Lazy Initializing State and Persisting State to localStorage 8m Lifting State 5m Summary 1m Why Immutability? 2m
Implementing Form Validation
Centralizing Change Handlers And Persisting Events 4m Creating Checkout 4m Form Validation Decisions 3m Implementing "On-the-fly" Form Validation 7m Implementing a State Enum On Checkout 3m Intro 0m Intro to State Enums 1m Saving the Form Submission and Emptying Cart 5m State Enums vs. Finite State Machines 2m Summary 1m Tracking Touch for Instant Validation 4m
Managing State via Refs
Avoiding Setting State on Unmounted Components 5m Controlled vs. Uncontrolled Inputs 1m Implementing Uncontrolled Inputs 6m Intro 1m Storing a Previous Value 5m Summary 1m When to Consider a Ref 2m
Managing Complex State with useReducer
Consuming Reducers 3m Dispatching Actions 4m Extracting State Management to UseReducer 4m Handling Add In Reducers 3m Handling Unexpected Action Types 1m Handling Updates In Reducers 2m Intro 1m Summary 1m Why useReducer? 3m useState vs. useReducer 1m
Sharing State and Functions via Context
Declaring a Context Provider 2m Consuming Context via a Custom Hook 4m Consuming a Context 3m Creating a Provider Component 4m Creating a Reusable useContext Hook 2m Declaring a Context 1m Intro 1m Requiring a Context Provider 2m Summary 1m Why Context? 5m Wrapping the App in a Context Provider 2m
Managing State in Class Components
Binding to This via Arrow Functions in Class Fields 3m Class Components vs Function Components 3m Consuming Multiple Contexts 2m Consuming a Render Prop 3m Consuming a Single Context via contextType 2m Declaring State 2m Deriving State 2m Destructuring and Deriving State in Render 3m Intro 1m Setting State 4m Sharing Logic and Consuming Hooks - Option 1: Pass via Props 4m Sharing Logic and Consuming Hooks - Option 2: Custom Wrapper 6m Sharing Logic and Consuming Hooks - Option 3: Render Prop 1m Sharing Logic and Consuming Hooks - Option 4: Function as Child 2m Summary 1m
Managing State via Third Party Libraries
Form State 1m Global State 3m How to Run the Demos 1m Immutable State 2m Intro 1m Local State 1m Recommended Exercises 1m Server State 4m Summary: How to Handle State 1m
Description
Course info
Rating
(16)
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
React: The Big Picture
Beginner
1h 10m
May 11, 2020
Clean Coding Principles in C#
Beginner
3h 18m
Jan 2, 2020
More courses by Cory House
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
[Autogenerated] Hi, I'm Cory House and welcome to my course managing React State. I'm the founder and principal consultant of React Yes, consulting dot com. React gaps aren't just read only their interactive, so a typical react up declares literally dozens of pieces of state and then react. There's a surprising number of options for effectively handling this state, including plane, state refs, context reducers, Web storage hooks and mawr. In this course, we're going to build a realistic online store using modern state management approaches. Some of the key topics that will cover include patterns for declaring, setting and reliably deriving state sharing data and logic between components. Managing, loading, air and form validation. State tracking on 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 APS 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 plural site

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT