Managing React State
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.
What you'll learn
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.
Table of contents
- 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
- 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
- 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
- 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
- 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
About the author
Cory is the principal consultant at reactjsconsulting.com, where he has helped dozens of companies transition to React. Cory has trained over 10,000 software developers at events and businesses worldwide. He is a seven time Microsoft MVP, and speaks regularly at conferences around the world. Cory lives in Kansas City and is active on Twitter as @housecor.