A Guide to React createContext with TypeScript

In this post, we will dive into a technique for sharing data between React components using Context.

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 Context

  • Code that creates a Context with React.createContext

  • A small example app that uses Context to 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?

Component 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

  • authentication

Context creates this common dataset that all components use.

So what is Context anyway?#

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.

A 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 createContext:

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:

  1. Defined the data that forms the context.

  2. Created a Context object, called LocaleContext.

  3. Instantiated a Provider in JSX to make the Context data available to React Components

  4. Inside consumer components, read data values from the Context and displayed them using the component's render logic.

These are the same general steps you will take when creating and consuming a Context in your own apps.

View the app and its code on CodeSandBox. Also check out and run our code repository on Github.

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 App component:

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 state anymore?

A: You still need state for handling data specific to a single component. Context is for global data.

Q: What about hooks like useState and useEffect, do they work with Context?

A: Yes, there's nothing that prevents you from using these parts of React with Context.

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: