Introduction to React Context for State Management
State management is tough. It's probably one of the hardest parts about front end development, and there are a lot of different ways to solve it.
Plain React state is easy to start with, but threading props through a deep component tree gets painful. Redux is a popular solution, but it comes with complexity and a pretty steep learning curve, and turns out to be overkill for many projects.
React Context strikes a nice balance. It's built into React, it's easy to set up, and it makes it simple to pass props deeply through your app. Context is actually what Redux uses under the hood to pass data around!
In this course we’ll build a simple email client. You’ll learn how to manage user login and logout using Context, and how to group related data and logic using simple wrapper components. We’ll also cover practical applications like using Context to display notifications, how to optimize performance with Context, and how to test the components that use it.
Dave Ceddia: [00:00] Hi. My name is Dave Ceddia. Welcome to my course on state management with React Context. State management is tough. There are so many options out there. It's tough to know which to choose.
[00:11] Plain React state is simple to get started with, but passing props down through a deeply nested tree of components gets pretty painful. Redux is a popular solution, but it comes with its own complexity and steep learning curve. It turns out to be overkill for a lot of projects.
[00:27] React Context is a nice middle ground. It's built into React. It's simple to set up. It makes it easy to pass data all around your app automatically. In fact, Context is what Redux uses under the hood to pass its data around.
[00:40] In this course, I'm going to walk you through how to use Context in a scale-model version of a larger app. You'll learn how to handle a login form, save the user into state, and pass it around with Context.
[00:51] We'll go over how to wrap together related data and logic and use Context to give the rest of the app access to that data as well as be able to update it. We'll also learn some practical applications, like using Context to display notifications and how to optimize your app's performance and keep those renders passed.
[01:07] I'll go over how to test components that use Context, both the provider side and the consumer side. I'm super-glad to have you here. I hope you enjoy this course.