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
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
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
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
Jan 18, 2021
Definitive answers and clarification on the purpose and use cases for Context and Redux.
- Mark Erikson
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.
Kent C. DoddsNov 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
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
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
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
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
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
Jan 29, 2020
In this tutorial I'll show you how to integrate them with React to create a ThemeComponent (with context!).
- Dor Shinar
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
Dec 20, 2019
I have been developing React Tracked, which is a library for global state with React Hooks and Context.
- Daishi Kato
Dec 10, 2019
I have been developing React Tracked, which is a library for global state with React Hooks and Context.
- Daishi Kato
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
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
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
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
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
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
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
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
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.
Robin WieruchOct 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.
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
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
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
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ć
Jun 29, 2019
This is a beginner tutorial in understanding React Hooks and the Context API.
- Ola John Ajiboye
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
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
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
May 20, 2019
How to handle user authentication in modern React Applications with context and hooks.
May 06, 2019
Why and how you can optimize your context provider's value to avoid performance issues.
May 06, 2019
Why and how you should always use React's useMemo hook for your context provider value prop.
Apr 29, 2019
How to create and expose React Context providers and consumers.
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
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
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
Feb 18, 2019
Understand communication between React components: Render props/props, Context API, React-Redux/Redux and more.
- Chidume Nnamdi
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
Feb 10, 2019
How to use React Context API in an easier and prettier way.
- Lorenzo Spyna
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
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
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
Nov 12, 2018
Leverage React’s Context API as a light and powerful alternative to Redux
- Bill Girten
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?
James K Nelson
Dave CeddiaNov 01, 2018
The Context API is a neat way to pass state across the app without having to use props
Flavio CopesOct 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.
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?
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
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
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
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.
Jun 14, 2018
Building a Shared Material UI Snackbar for In-App Notifications.
- Shawn Reisner
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
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
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.
Christian NwambaApr 23, 2018
Let’s compare the before/after of React’s new context API.
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
Apr 09, 2018
Using Context, we no longer need to loop through and clone each child to pass down required props.
- Shaun David Hutch
Mar 31, 2018
This article explains how to use React’s new context API for passing props down the component tree.
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.
Brian VaughnMar 29, 2018
React Context is a way for a child component to access a value in a parent component.
- Yomi Eluwande
Mar 21, 2018
Context is currently an experimental API for React - but soon to be a first class citizen!
- Neal Fennimore
Mar 13, 2018
React 16.3 has a new Context API which makes accessing data and functions anywhere in your application a snap.
Wes BosFeb 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
Feb 07, 2018
It’s way more ergonomic, it’s no longer “experimental,” and it’s now a first-class 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
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.
Tyler McGinnisJun 08, 2020
In this Live Stream we're going to try React Context.
- Florin Pop
Scott TolinskiFeb 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.
Brad TraversyFeb 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.
Leigh HallidayDec 13, 2019
Little code along of me trying to figure out how to use local state with context and hooks.
Oct 28, 2019
With Context, useContext, and useReducer, do you even still need Redux? What's the difference between Context and Redux anyway?
Oct 08, 2019
- Jamon Holmgren
Jun 29, 2019
Learn how to use the useContext hook in React to store and access a user.
Ben AwadApr 23, 2019
Learn how Level Up uses React Context to manage all global state.
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!
Maximilian SchwarzmüllerDec 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
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
Nov 01, 2018
Learn how to use the React Context API with function components. Using the useContext React Hook.
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.
Swizec TellerApr 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.
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
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
May 02, 2019
Modern React with Every React Update Since v16 Demystified (includes advanced hooks)
- Ohans Emmanuel
Courses & Video Series
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
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.
Brian HoltSep 13, 2018
Learn to build real-world applications in React!
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.
Jul 23, 2018
Learn & Master React With The Context API + Redux & Build a Real World Project With Firebase/Firestore.
Jul 17, 2018
Learn about the enhancements found in React 16 and how to leverage key features to build better React apps
Eve PorcelloMay 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.
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.
PayPalApr 30, 2018
Master the fundamentals of React v16.3.2 and Redux as you develop apps with React Router, Webpack, and ES6.
- Stephen Grider
Sep 27, 2017
React 16 comes with some powerful new features, in this course we'll be exploring each of them.
Nik GrafPodcast Episodes
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.
Michael Jackson- Dave Rupert
- Chris Coyier