React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In many cases, teams reach for Redux as the de facto choice for state management. But sometimes, Redux is overkill. In those cases, the React Context API might suit your needs perfectly.

In this course, we’ll build a simple email client using the React Context API to pass data throughout the app. You’ll learn how to create a context, how to pass data deeply through an app without manually passing props all over the place, and how to group related data and logic using simple wrapper components. We’ll also cover practical applications like using Context to display and manage notifications, how to maximize performance with Context, and how to test the components that use it to ensure your app is working properly.

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.

Introduction to React Context for State Management 

Passing data deep through a React app usually involves tedious passing of props or a complex solution like Redux. Here you’ll learn how to simplify an app that’s currently passing data with props by refactoring it to use React’s Context API.

Avoid passing props deeply by using React Context

A Context Provider can only accept a single value, but it can be of any type. When you need to pass multiple values through Context, group them into an object. Here we’ll learn how to pass data along with a callback function for updating the data, so that children will be able to update their parents.

Pass Data With a Callback Through React Context

A single Root component responsible for disparate data like current user, language setting, and theme will become messy and hard to work with. One way to fix this is to move related logic and data into a class, along with a Context Provider to get the data out. In this lesson we’ll group the logic and data for login, and use Context to pass it throughout the app.

Hide the Implementation Details of a Context Provider

When you have two unrelated kinds of data such as a current user and a currently-selected email, it’s common for some parts of the app to need the user and some other parts of the app to need the email. One way to do this is to create multiple Contexts, each with its own Provider and Consumer, and use each one to distribute one kind of data to the slices of the app that need it. In this lesson we’ll pass user data and email data to separate subtrees using two separate Contexts.

Use Multiple React Context Providers in the Same App

You may come upon a case where you have a generic component that *can* consume a Context, but doesn’t require that Context in order to work. On the flip side, you may want to validate that a component is *always* used inside a required parent Context. In this lesson we’ll see how to set a default value on a Provider and access that default in the Consumer, as well as how to validate that a Consumer is used correctly, by checking the value it receives and throwing an error if it is missing.

Use a React Context Consumer Outside of the Matching Provider

A common kind of “global” data is a toast or popup notification that appears in the corner of the app when some event happens. Allowing a deeply-nested component to surface a notification using props can be painful, but Context makes it much easier. In this lesson we’ll see how to dispatch a notification from a deeply-nested component and display it at the root level.

Use React Context to Display Notifications

React 16.6 introduced the ability to consume data from context without using the Consumer component directly. This helps to cut down on unnecessary nesting in your components’ JSX, making them easier to read. In this lesson we’ll see how to replace a Consumer by using the contextType property.

Use contextType to Consume Context in a React Class Without a Consumer

React Hooks introduced a number of useful functions, one of which is useContext. It allows you to consume a Context in a function component without using a Consumer directly. This helps to cut down on unnecessary nesting in your components’ JSX, making them easier to read. In this lesson we’ll see how to replace a Consumer with the useContext hook.

Use the useContext Hook to Consume Context in Function Components

Consuming a Context in a component can make it tricky to test, because it requires an invisible Provider outside the scope of the component being tested. In this lesson you’ll learn how to test a component that uses a Context Consumer.

Test a Component That Uses a React Context Consumer

Providing a Context from a component can make it tricky to test, because it requires that you use a matching Consumer in your tests. In this lesson you’ll learn how to test a component that uses a Context Provider.

Test a Component That Uses a React Context Provider

One tripping point with Context is that it will automatically re-render the subtree under a Provider whenever that Provider’s value changes, which can lead to performance problems if you aren’t careful. In this lesson you’ll learn what to watch out for, and a simple trick for avoiding unnecessary re-renders to keep your app running smoothly. You'll also learn how to use React.memo to optimize individual function components.

React Context for State Management

Dave Ceddia

Course Content