Using React Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level. More info

Articles & Tutorials

Sharing state like Redux with React's Context API (
Sep 15, 2019
In learning React, one of the first challenges I faced was figuring out state management. State is a vital part of any application that has more complexity than a simple blog or brochure site.
  • Rohan Faiyaz Khan
Redoing search UI with React Context and refs (
Sep 12, 2019
In this article, we’ll cover the following: Context: basic usage and strategies for injecting data anywhere in your component tree; Refs: what they are and why our use case calls for them.
  • Ryan Harris
A Performant Solution for Replacing Redux with React Context and Hooks (
Aug 02, 2019
To understand all the crucial concepts behind this, we’ll create a button which fetches dad jokes from icanhazdadjoke and displays them. This minimal example is all we need.
  • Matija Marohnić
Let's learn React Hooks and Context API by building a Recipe Search App (
Jun 29, 2019
This is a beginner tutorial in understanding React Hooks and the Context API.
  • Ola John Ajiboye
How YOU can use the Context API in React.js to pubsub (
Jun 16, 2019
The React Context exists so you don’t have to pass in data manually at every level. Context is about sharing data to many components. So essentially it's about Publish and Subscribe or Pubsub for short.
  • Christoffer Noring
Build our own React-Redux using useReducer and useContext Hooks (
Jun 05, 2019
We always use the react-redux library in our React apps whenever we decide to include state management in our React app.
  • Chidume Nnamdi
Handling Authentication in React with Context and Hooks (
May 27, 2019
Learn how to handle identity management in React by creating a global state for your authentication details with Context and update these details with Hooks.
  • Roy Derks
Authentication in React Applications (
May 20, 2019
How to handle user authentication in modern React Applications with context and hooks.
How to optimize your context value (
May 06, 2019
Why and how you can optimize your context provider's value to avoid performance issues.
Always useMemo your context value (
May 06, 2019
Why and how you should always use React's useMemo hook for your context provider value prop.
How to use React Context effectively (
Apr 29, 2019
How to create and expose React Context providers and consumers.
How to Use the useContext Hook in React (
Mar 30, 2019
Let’s explore the React useContext Hook by building a music player! I’ll also show you how a custom React Hook can make the useContext Hook easier to use.
  • James King
How to build a calculator with React Hooks and the React Context API (
Mar 14, 2019
This project is going to be a basic calculator app similar to the iPhone calculator. Since this is just a simple desktop app I have replaced the % button with a back button.
  • Theran Brigowatz
Leveraging the Context API in React.js (
Mar 05, 2019
The React Context exist so you don’t have to pass in data manually at every level. Context is about sharing data to many components.
  • Christoffer Noring
React: Communication Between Components (
Feb 18, 2019
Understand communication between React components: Render props/props, Context API, React-Redux/Redux and more.
  • Chidume Nnamdi
Sharing state using React's Context API (
Feb 17, 2019
Global state in React is synonymous with libraries like Redux. If you ever needed to share state like the current route or data from an API with multiple components, then you may have reached for Redux yourself.
  • Sunny Singh
Manage React state without redux (
Feb 10, 2019
How to use React Context API in an easier and prettier way.
  • Lorenzo Spyna
Using React Context API with Gatsby (
Jan 31, 2019
Let’s do a deep dive into how this feature was actually implemented step by step using React Context, Gatsby, and a Theme Provider to implement a dark mode UI!
  • Muhammad Muhsin
How to Use Basic React Hooks for Context (
Dec 18, 2018
The 16.7 release of React introduces an important new feature: React Hooks. Get "hooked" on React as we take a look at the useContext React Hook
  • Eric Bishard
Three different ways to use Context (
Dec 15, 2018
Prop drilling can be a good thing, and it can be a bad thing. Thankfully, there are better ways to do it with the Context API.
  • Emil Døhlen Hansen
  • Svein Petter Gjøby
Clever React context tricks using Typescript — not Redux (
Nov 12, 2018
Leverage React’s Context API as a light and powerful alternative to Redux
  • Bill Girten
Passing state to render props via context (
Nov 02, 2018
Headless components are a great new way to separate presentation and control logic. But what if you don't want to pick and place all the render function's props manually?
The React Context API (
Nov 01, 2018
The Context API is a neat way to pass state across the app without having to use props
Avoiding unnecessary renders with React context (
Oct 12, 2018
Before you replace Redux's <Provider> component with React's new context API, there's a thing or two that you should know about performance.
When Context Replaces Redux (
Oct 02, 2018
Since Redux was created in 2015, its <Provider> component has always used React's Context API. So how can Context replace Redux?
Choosing between Redux and React’s Context API (
Sep 23, 2018
While I worked on a recent project at work, I had to implement filtering and sorting (for a table) through some URL query parameters.
  • Faiz Mohammed
How Do I Use React Context? (
Aug 19, 2018
Over the past six months, there has been plenty of hype about the new Context. At the end of this post, you’ll know what it is, whether and when you should use it, and how to implement it in your applications.
  • Mae Capozzi
Using Composition and Render Props instead of Context API (
Aug 05, 2018
If what you are trying to achieve is to just pass down some props without dealing with passing it to every component in between, you don’t have to use Redux or Context API.
  • Baris Ozcetin
Redux vs. The React Context API (
Jul 17, 2018
In this post I want to cover how the new Context API works, how it is similar to Redux, when you might want to use Context instead of Redux, and why Context doesn’t replace the need for Redux in every case.
Learn the React Context API with a Practical Example You Can Bring to Your Apps (
Jun 14, 2018
Building a Shared Material UI Snackbar for In-App Notifications.
  • Shawn Reisner
Digging Into React Context (
Jun 11, 2018
You may have wondered lately what all the buzz is about Context and what it might mean for you and your React sites.
  • Kingsley Silas
Get to Know React's New Context API (
May 18, 2018
In a world where there are lots of different front-end frameworks, it's always hard to know which one to pick.
  • Sarah Jorgenson
Working with the new React Context API (
May 02, 2018
This post explains the React Context API by showing off the old and new version, comparing them, and explaining how best to use the API.
Migrating to React’s New Context API (
Apr 23, 2018
Let’s compare the before/after of React’s new context API.
How to use React’s new Context API to easily manage modals (
Apr 15, 2018
How many times have you been frustrated with having to add another item in your React state along with 2 functions for opening and closing a modal? From React 16.3 you can leverage the new Context API to solve this issue.
  • Bogdan Soare
How To Master Advanced React Design Patterns  -  Context API (
Apr 09, 2018
Using Context, we no longer need to loop through and clone each child to pass down required props.
  • Shaun David Hutch
React's Context API explained: Provider and Consumer (
Mar 31, 2018
This article explains how to use React’s new context API for passing props down the component tree.
React v16.3.0: New lifecycles and context API (
Mar 29, 2018
In React 16.3.0, we are adding a few new lifecycle methods to assist with that migration. We are also introducing new APIs for long requested features: an official context API, a ref forwarding API, and an ergonomic ref API.
How (and when) to use React’s new Context API (
Mar 29, 2018
React Context is a way for a child component to access a value in a parent component.
  • Yomi Eluwande
Putting Things in Context With React (
Mar 21, 2018
Context is currently an experimental API for React - but soon to be a first class citizen!
  • Neal Fennimore
Heres how React's New Context API Works (
Mar 13, 2018
React 16.3 has a new Context API which makes accessing data and functions anywhere in your application a snap.
Replacing Redux with the new React context API (
Feb 25, 2018
The new context API that comes with React 16.3 is pretty neat. It was built in the render props style trending over these last months. Let’s explore it.
  • Didier Franc
React’s new Context API (
Feb 07, 2018
It’s way more ergonomic, it’s no longer “experimental,” and it’s now a first-class API!
A bit about context (
Dec 18, 2017
  • Kristofer Selbekk
How to use React's Provider Pattern with React's Context API (
Jul 11, 2017
React's Provider Pattern is deployed by using React's Context API. It helps you to pass props from a parent component to deeply nested components in the component hierarchy. After having read the article, you will know how to use it yourself and how Redux and MobX are using it as well.

Video Guides & Talks

React Hooks useContext Tutorial (Storing a User) (
Jun 29, 2019
Learn how to use the useContext hook in React to store and access a user.
Using React Context For Global State (
Apr 23, 2019
Learn how Level Up uses React Context to manage all global state.
React Context vs Redux - Who wins? (
Feb 19, 2019
Is the React Conext API a good replacement for Redux? And how would you switch? Here's an example project and some reasons on why (not to) switch!
Leveraging Context API in Redux (
Dec 20, 2018
Redux and Context are frequently discussed as competing state management solutions. Redux is strengthened, but also sometimes limited by its prescription of "one true global store." This talk discusses a synergy between the two technologies to address this 'limitation' in certain cases.
  • Brian Mullin
Powering Code Reuse with Context and Render Props (
Dec 17, 2018
This talk will explain how context and render props work and give you some ideas of how to use them to simplify your own code.
  • Forbes Lindsay
React Hooks useContext (
Nov 01, 2018
Learn how to use the React Context API with function components. Using the useContext React Hook.
React 16.3 Context API explained in 2 minutes (
Apr 16, 2018
The new React 16.3 context API. Why to use it, when to use it, how to use it. All in 2 minutes 20 seconds and 150 milliseconds.
Introducing the React Context API (
Apr 10, 2018
We'll take a look at the new React Context API, how to use it, what it does, and if it should replace Redux or MobX for your go-to state management option.
React's All New Context API (
Mar 21, 2018
React 16.3.0 introduces a brand new Context API. Context makes it easy to pass props down to any child in your tree, even if they are not a direct child.
  • Harry Wolff
Heres how React's New Context API Works (
Mar 13, 2018
React 16.3 has a new Context API which makes accessing data and functions anywhere in your application a snap.

Books & Guides

Reintroducing React (
May 02, 2019
Modern React with Every React Update Since v16 Demystified (includes advanced hooks)
  • Ohans Emmanuel

Courses & Video Series

Complete React Developer in 2019 (w/ Redux, Hooks, GraphQL) (
Jul 01, 2019
Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase.
  • Andrei Neagoie
  • Yihua Zhang
Complete Intro to React, v5 (
Jun 04, 2019
Learn to build real-world applications using modern React! Much more than an intro, you’ll start from the ground up, getting all the way to using the latest features in React, including hooks, effects, context, and portals.
React Lyric Search App (Context API) (
Sep 01, 2018
In this project mini-series we will create an app that we can use to search song lyrics using Reacts built in context API along with the Musixmatch public API.
React Front To Back (
Jul 23, 2018
Learn & Master React With The Context API + Redux & Build a Real World Project With Firebase/Firestore.
React: Components, Context, and Accessibility (
Jul 17, 2018
Learn about the enhancements found in React 16 and how to leverage key features to build better React apps
Level 2 React (
May 23, 2018
In this series, we dive into intermediate React concepts where you'll learn things like, how to use the React Context API, how to make a portal in React, how to use and understand render props as well as animated transitions and interactive animations in React.
Advanced React Component Patterns Workshop @ PayPal (
May 11, 2018
With this course, you'll not only learn great patterns you can use, but also the strengths and weaknesses of each so you know which to reach for to provide your components the flexibility and power you need.
Modern React with Redux (
Apr 30, 2018
Master the fundamentals of React v16.3.2 and Redux as you develop apps with React Router, Webpack, and ES6.
  • Stephen Grider
Leverage New Features of React 16 (
Sep 27, 2017
React 16 comes with some powerful new features, in this course we'll be exploring each of them.

Podcast Episodes

React Drama with Michael Jackson (
Mar 13, 2018
We're joined by Michael Jackson, co-founder of React Training and creator of unpkg, to talk about some of the drama in the JavaScript world on the internet lately. We cover Dan Abramov's beyond React talk, Context and Suspense API, whether View Source matters, React Native Web, and of course Mootools.