React Context for Application State

57m

people completed

Bookmark

Download

RSS

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 module, 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 and how to maximize performance with Context.

Instructor

Dave Ceddia

A 10-year veteran of the software industry, Dave has been coding away since he was a kid. Currently an author, blogger, co-organizer of the Boston React meetup, and front end developer focused on React. He splits his free time between family and a constantly-shifting array of hobbies like music, aviation, and DIY projects.

Course content (13 lessons)

1
Finished Product First: the App We're Building
2m 30s
2
Avoid prop drilling with React Context
5m 52s
3
Allow Children to Update Parents with a callback from Context in React
4m 2s
4
Manage the Logged-in User State with Context
2m 11s
5
Create a Context Wrapper With a Custom Hook
4m 34s
6
Use Multiple Context Providers in the same app
7m 23s
7
Manage Context State with the useReducer Hook
5m 33s
8
Use the useEffect Hook to Periodically Fetch Data
2m 58s
9
Use React Context to display notifications
6m 18s
10
Periodically Clean Up Notifications with useEffect and setInterval
2m 46s
11
Create a Wrapper to Contain the Providers
1m 33s
12
Performantly render a large list of items with React Context
10m 15s
13
Use a Context Outside of its Matching Provider
1m 34s

illustration for React Context for Application State

Start Watching

Instructor

Dave Ceddia