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

Understand React Context API (telerik.com)
May 06, 2021
Learn how the Context API works in React and the best times to use it to avoid prop-drilling in your application.
  • Leonardo Maldonado
Build a React Budget Tracker App – Learn React & Context API with this Fun Project (freecodecamp.org)
Mar 12, 2021
In this React Budget Tracker App tutorial we're going to learn how break down a UI into React components, learn how to work with state using the Context API, learn about actions, reducers, and the dispatch function.
  • Chris Blakely
How to Use React Context Effectively (kyleshevlin.com)
Mar 11, 2021
In this post, I want to go over how I personally use React Context. I think you'll find it succinct and useful.
  • Kyle Shevlin
Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) (blog.isquaredsoftware.com)
Jan 18, 2021
Definitive answers and clarification on the purpose and use cases for Context and Redux.
  • Mark Erikson
Use CSS Variables instead of React Context (epicreact.dev)
Nov 13, 2020
I've been riding the CSS-in-JS train for years (I was even a significant contributor to the "movement"). It's awesome. I've never been so productive working with CSS than when I added a real programming language to it.
How to use React Context with TypeScript (blog.logrocket.com)
Nov 05, 2020
In this guide, we will learn how to use TypeScript with React Context by building a to-do app from scratch. Let’s dive in.
  • Ibrahima Ndaw
Creating React contexts for fun and profit (blog.logrocket.com)
Nov 04, 2020
This article is going to dive into what a context is, when you should be reaching for them, and the best way to create them.
  • Kristofer Selbekk
A deep dive into React Context API (blog.logrocket.com)
Jun 16, 2020
This post gives you a thorough overview of what the React Context API is and what it isn't, and explains where you should probably use Redux instead.
  • Adebiyi Adedotun
Jest tests with react context api (itnext.io)
Apr 01, 2020
I always find myself doing dumb mistakes all over the code that could easily be caught by well-written tests. Last fall I attended this conference where this workshop leader said if you really want your developers to write good tests, you have to make the developers accountable. And you do that by fire all the testers. I love testers though.
  • Malin Milford
Building a CRUD App with React Hooks & the Context API (alligator.io)
Mar 16, 2020
This article will be covering React hooks, introduced in version 16.8 and the Context API, introduced in 16.3 and mixing them together to build a fully functional CRUD application.
  • Ishan Manandhar
Pitfalls of overusing React Context (blog.logrocket.com)
Feb 04, 2020
In this tutorial, we’ll review the potential consequences of overusing React Context and discuss how to use it effectively in your next React project.
  • Ibrahima Ndaw
How to Create a Themes Engine Using CSS Variables and React Context (freecodecamp.org)
Jan 29, 2020
In this tutorial I'll show you how to integrate them with React to create a ThemeComponent (with context!).
  • Dor Shinar
An Introduction To React’s Context API (smashingmagazine.com)
Jan 13, 2020
In this article, you will learn how to use React’s Context API which allows you to manage global application states in your React apps without resorting to props drilling.
  • Yusuff Faruq
How to Handle Async Actions for Global State With React Hooks and Context (blog.axlight.com)
Dec 20, 2019
I have been developing React Tracked, which is a library for global state with React Hooks and Context.
  • Daishi Kato
How to Handle Async Actions for Global State With React Hooks and Context (newline.co)
Dec 10, 2019
I have been developing React Tracked, which is a library for global state with React Hooks and Context.
  • Daishi Kato
Manage Global State with Context API and Hooks (react.christmas)
Dec 07, 2019
For quite some time, Redux has been React developers go-to library for managing their app’s global state. It’s a great tool – but do you really need it?
  • Jonas Løchsen
The React useContext Hook in a Nutshell (alligator.io)
Nov 26, 2019
Early February 2019, React introduced Hooks as a way to rewrite your components as simple, more manageable, and classless. useContext is one of the built-in Hooks, giving functional components easy access to your context.
  • Stephen Hartfield
Use Hooks + Context, not React + Redux (blog.logrocket.com)
Nov 25, 2019
In this article, I will introduce the React Context API for state management and show you what makes React Hooks plus the Context API a better solution than Redux.
  • Ebenezer Don
React Global State Management with Hooks (itnext.io)
Nov 23, 2019
I was recently working on a Next.js project and wanted a few pieces of global state. I didn’t really want to go through all the setup for redux (nothing against redux, I love redux) so I decided to implement my own simple version of it using hooks.
  • Mark Sauer-Utley
Learn React Context in 5 Minutes - A Beginner's Tutorial (freecodecamp.org)
Nov 08, 2019
React's Context API has become the state management tool of choice for many, oftentimes replacing Redux altogether. In this quick 5-minute tutorial, you'll see an introduction to what Context is and how to use it!
  • Bob Ziroll
How to Use Context API with Hooks Efficiently While Avoiding Performance Bottlenecks (telerik.com)
Oct 25, 2019
Context API is a great feature offered by React, but it can be tricky to get it right. Learn how to efficiently create and consume Context API with the use of React Hooks without performance issues.
  • Thomas Findlay
Manage User Login with React Context (alligator.io)
Oct 24, 2019
It’s common in React for data to flow from top to bottom through props (parent component to children components), but this is not ideal all the time.
  • Mayuran Selvaraja
Re-export Context Provider (aworkinprogress.dev)
Oct 23, 2019
Recently I realize I like this pattern a lot, much enough that I'll write a short note on this.
  • Wei Gao
How to useContext in React? (robinwieruch.de)
Oct 19, 2019
React's Function Components come with React Hooks these days. Not only can React Hooks be used for State in React but also for using React's Context in a more convenient way. This tutorial shows you how to use React's useContext Hook.
React Context (robinwieruch.de)
Oct 17, 2019
React Context is a powerful feature. If your React application grows in size beyond a small application, there is nothing wrong in giving it a shot. Many third-party libraries like Redux are using it under the hood anyway, so why not learning about it.
Passing data between sibling components in React using Context API and React Hooks (itnext.io)
Oct 06, 2019
I will build a simple react app with 2 inputs, where their values will be completely synchronized. In this article I will explain how easy to send data between react sibling components using the most recent react features.
  • Valentyn Bilousov
Sharing state like Redux with React's Context API (dev.to)
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 (blog.logrocket.com)
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 (silvenon.com)
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 (dev.to)
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 (dev.to)
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 (blog.bitsrc.io)
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 (auth0.com)
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 (kentcdodds.com)
May 20, 2019
How to handle user authentication in modern React Applications with context and hooks.
How to optimize your context value (kentcdodds.com)
May 06, 2019
Why and how you can optimize your context provider's value to avoid performance issues.
Always useMemo your context value (kentcdodds.com)
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 (kentcdodds.com)
Apr 29, 2019
How to create and expose React Context providers and consumers.
How to Use the useContext Hook in React (upmostly.com)
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 (medium.freecodecamp.org)
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 (itnext.io)
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 (blog.bitsrc.io)
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 (dev.to)
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 (itnext.io)
Feb 10, 2019
How to use React Context API in an easier and prettier way.
  • Lorenzo Spyna
Using React Context API with Gatsby (gatsbyjs.org)
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 (telerik.com)
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 (react.christmas)
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 (medium.freecodecamp.org)
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 (frontarm.com)
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 (flaviocopes.com)
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 (frontarm.com)
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 (frontarm.com)
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 (blog.usejournal.com)
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? (hackernoon.com)
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 (medium.com)
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 (daveceddia.com)
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 (itnext.io)
Jun 14, 2018
Building a Shared Material UI Snackbar for In-App Notifications.
  • Shawn Reisner
Digging Into React Context (css-tricks.com)
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 (scotch.io)
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 (blog.pusher.com)
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 (blog.kentcdodds.com)
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 (medium.com)
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 (itnext.io)
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 (robinwieruch.de)
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 (reactjs.org)
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 (blog.logrocket.com)
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 (css-tricks.com)
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 (wesbos.com)
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 (medium.freecodecamp.org)
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 (medium.com)
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 (react.christmas)
Dec 18, 2017
  • Kristofer Selbekk
How to use React's Provider Pattern with React's Context API (robinwieruch.de)
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 Context Explained (youtube.com)
Jul 28, 2020
In this video you'll learn what React context is as well as when (and when not) to use it. You'll also learn about the useContext Hook.
Learning React Context (youtube.com)
Jun 08, 2020
In this Live Stream we're going to try React Context.
  • Florin Pop
Build an Expense Tracker | React Hooks & Context API (youtube.com)
Feb 22, 2020
In this project we will take a vanilla JS expense tracker app and turn it into a React app using hooks (useState, useContext, useReducer) and the context API.
That React Component Right Under Your Context Provider Should Probably Use React.memo (youtube.com)
Feb 18, 2020
Sophie Alpert - former manager of the React team at Facebook - mentioned in a tweet "That React Component Right Under Your Context Provider Should Probably Use `React.memo`"... in this video we're going to explore what she meant, what the issue is, and how to solve it.
Using React Hooks, Context and State (youtube.com)
Dec 13, 2019
Little code along of me trying to figure out how to use local state with context and hooks.
React Context API vs. Redux (youtube.com)
Oct 28, 2019
With Context, useContext, and useReducer, do you even still need Redux? What's the difference between Context and Redux anyway?
React Hooks useContext Tutorial (Storing a User) (youtube.com)
Jun 29, 2019
Learn how to use the useContext hook in React to store and access a user.
Using React Context For Global State (youtube.com)
Apr 23, 2019
Learn how Level Up uses React Context to manage all global state.
React Context vs Redux - Who wins? (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (youtube.com)
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 (leanpub.com)
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) (udemy.com)
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 (frontendmasters.com)
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) (youtube.com)
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 (udemy.com)
Jul 23, 2018
Learn & Master React With The Context API + Redux & Build a Real World Project With Firebase/Firestore.
React: Components, Context, and Accessibility (lynda.com)
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 (leveluptutorials.com)
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 (youtube.com)
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 (udemy.com)
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 (egghead.io)
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 (shoptalkshow.com)
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.