In this post, we will dive into a technique for sharing data between React components using
While we usually use props to pass values, that doesn't always work if we have components in different parts of our component tree. We can use
Context to share these values anywhere in our app (and we can use TypeScript to type them).
Below, I'm going to show you:
Why we need shared
Code that creates a
A small example app that uses
Contextto provide weather reports localized in multiple languages:w
By the way,
Context is an intermediate React topic. We cover this more in depth in Fullstack React with TypeScript.
This book will help both experts and React beginners develop advanced React and TypeScript skills. Check it out.
Why We Need Context#
React already provides us with component
state to track data in components, so why do we need a different way to track data?
state only works inside each component. and can't share that data with other components unless you e.g. pass it using props.
But with larger apps, some of the data that is shared across components might include:
application theme and styles
locales that translate the app into different languages
cookies that allow personalization
Context creates this common dataset that all components use.
So what is
Context is a way where React apps can share data between different components. Again, the key point here is that these components don't have to have a parent-child relationship. They can be in completely separate parts of your app -- as long as they access the same context, they can share data.
Context object holds any data we assign: numbers, strings, objects, functions, arrays, etc.
Here's how you create a
Context with React and TypeScript:
React provides us the
React.createContext function. It takes any data type. In the example, I'm passing it an
object with a
userName property and a
profilePic property. Of course, we're using TypeScript so we want to type the object in context. We could do it like this:
Then to use this type, we'd use a generic when we call
Use Case For Context: Locale Support For A Weather app#
To see React
Context in action, consider this example for localizing a weather app.
In this app, we want to show weather reports in 4 different languages. The user is able to change their language or locale selection at any time. We'll support English, French, Japanese, and German.
In addition, weather information must be translated to Fahrenheit or Celsius depending on the locale.
Here's what the app's default interface looks like with locale set to "English (US)":
Here's what it looks like when the locale is changed to "Japanese (JP)":
This is how we used
Context to solve this problem:
Defined the data that forms the
Providerin JSX to make the
Contextdata available to React Components
Inside consumer components, read data values from the
Contextand displayed them using the component's
These are the same general steps you will take when creating and consuming a
Context in your own apps.
The Code That Provides A Global Context#
We create a
LocaleContext using the
React.createContext function. It looks like this:
This creates the
LocaleContext. The next step provides it to the app using a
LocaleProvider. We do this in our main
The Code That Consumes The Context#
Regular components in the component tree access the values stored in the
LocaleContext and use them.
Here's what this looks like:
React Context fAQ#
Q: Does this mean that you don't need to use
A: You still need
state for handling data specific to a single component.
Context is for global data.
Q: What about hooks like
useEffect, do they work with
A: Yes, there's nothing that prevents you from using these parts of React with
React And TypeScript Are Like Peanut Butter and Jelly#
We have just released Fullstack React with TypeScript
This guidebook will teach you the skills you need to how to use React and TypeScript confidently in your work. You can get a copy here: