Managing State in React 18
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
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. In this course, Managing State in React 18, 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. 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
- Setup Demo 6m
- Declaring State with UseState 6m
- The Rules of Hooks 2m
- Implementing Event Handlers 3m
- React Developer Tools 1m
- Implementing Derived State and Exploring When React Renders 4m
- Fetching and Storing Data via UseEffect 4m
- Four Ways to Handle API Calls 2m
- Handling Errors via Error Boundaries 6m
- Handling Loading State 3m
- Implementing Async/await in useEffect 4m
- Creating a Custom Hook 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 Navigation 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 localStorage 8m
- Summary 1m
- Intro 1m
- 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
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.