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

Use it when you need to share data “globally”, between many components on different levels to a component tree.

import React from 'react';

const defaultUser = {};
const UserContext = React.createContext(defaultUser);

, so that TypeScript will know what types are acceptable for this context.

import React from 'react';

const defaultValue = 42;
const MeaningOfLifeContext = 
      React.createContext<number>(defaultValue);

However, there is a catch. If we have a data structure that can't have default values we can't just type a context:

import React from 'react';

// We know that user must have an ID and a name, 
// but we cannot assign any “default values” for now.
type User = {
  id: string,
  name: string,
}

const defaultUser = {};

// If we pass `User` as a type-parameter
// we get an error because the `defaultUser`
// doesn't have any required fields.
const UserContext = 
      React.createContext<User>(defaultUser);

The first one allows not to assign values to fields of a 

import React from 'react';

type User = {
  id: string,
  name: string,
}

const defaultUser = {};
const UserContext = 
      React.createContext<Partial<User>>(defaultUser);

But in this case, we lose in type-safety a bit because we can miss some values later.

import React from 'react';

type User = {
  id: string,
  name: string,
}

const defaultUser = null;
const UserContext = 
      React.createContext<User | null>(defaultUser);

This way we don't lose in type-safety, but we will need to check if the context value is 

When created, a context can be used in components. To give access to a context value we need to use 

import React from 'react';

const UserProfile: React.FC = ({children}) => {
  const user = {
    id: 'user42',
    name: 'Alex',
  };
  
  return (
    <UserContext.Provider value={user}>
      {children}
	</UserContext.Provider>
  )
}

 component accepts a value prop to be passed to consuming components that are descendants of this 

import React from 'react';

const UserName: React.FC = () => {
  return (
    <UserContext.Consumer>
      {value => (
        <p>{value.name}</p>
      )}
    </UserContext.Consumer>
  )
}

. This means that it accepts a function instead of a component as a child. It will then pass a context value as an argument to this function.

 to get access to a context value. This makes the component's source much simpler and cleaner.

import React, {useContext} from 'react';

const UserName: React.FC = () => {
  // `user` will have the `User` type.
  const user = useContext(UserContext);
  return <p>{user.name}</p>
}

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Use React Context with TypeScript</h1><p>React Context <a href="https://reactjs.org/docs/context.html" rel="noopener noreferrer nofollow">provides</a> a way to pass data through the component tree without having to pass props down manually at every level.</p><p>Use it when you need to share data “globally”, between many components on different levels to a component tree.</p><h2><a name="creating-a-context" id="creating-a-context">Creating a Context</a></h2><p>To create a context use <code>React.createContext</code>:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-XqKz7" id="cm-XqKz7">import React from 'react';

const defaultUser = {};
const UserContext = React.createContext(defaultUser);</textarea><p>With TypeScript, you can <a href="https://www.typescriptlang.org/docs/handbook/generics.html" rel="noopener noreferrer nofollow">declare a type for a context</a>, so that TypeScript will know what types are acceptable for this context.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-nJHmS" id="cm-nJHmS">import React from 'react';

const defaultValue = 42;
const MeaningOfLifeContext = 
      React.createContext&lt;number&gt;(defaultValue);</textarea><p>However, there is a catch. If we have a data structure that can't have default values we can't just type a context:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-Z1ZuB" id="cm-Z1ZuB">import React from 'react';

// We know that user must have an ID and a name, 
// but we cannot assign any “default values” for now.
type User = {
  id: string,
  name: string,
}

const defaultUser = {};

// If we pass `User` as a type-parameter
// we get an error because the `defaultUser`
// doesn't have any required fields.
const UserContext = 
      React.createContext&lt;User&gt;(defaultUser);</textarea><p>There are 2 workarounds here.</p><ol><li><p>Use <code><a href="https://www.typescriptlang.org/docs/handbook/utility-types.html" rel="noopener noreferrer nofollow">Partial&lt;&gt;</a></code><a href="https://www.typescriptlang.org/docs/handbook/utility-types.html" rel="noopener noreferrer nofollow"> utility type</a>.</p></li><li><p>Allow <code>null</code> as a fallback type.</p></li></ol><p>The first one allows not to assign values to fields of a <code>User</code> type. So when we pass a <code>defaultUser</code> as an initial value there no errors:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-0beTU" id="cm-0beTU">import React from 'react';

type User = {
  id: string,
  name: string,
}

const defaultUser = {};
const UserContext = 
      React.createContext&lt;Partial&lt;User&gt;&gt;(defaultUser);</textarea><p>But in this case, we lose in type-safety a bit because we can miss some values later.</p><p>The second option is to set <code>null</code> as an initial value:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-NvUZJ" id="cm-NvUZJ">import React from 'react';

type User = {
  id: string,
  name: string,
}

const defaultUser = null;
const UserContext = 
      React.createContext&lt;User | null&gt;(defaultUser);</textarea><p>This way we don't lose in type-safety, but we will need to check if the context value is <code>null</code> every time we access it.</p><h2><a name="providing-context-values-to-components" id="providing-context-values-to-components">Providing Context Values to Components</a></h2><p>When created, a context can be used in components. To give access to a context value we need to use <code>Provider</code>:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-MkysH" id="cm-MkysH">import React from 'react';

const UserProfile: React.FC = ({children}) =&gt; {
  const user = {
    id: 'user42',
    name: 'Alex',
  };
  
  return (
    &lt;UserContext.Provider value={user}&gt;
      {children}
	&lt;/UserContext.Provider&gt;
  )
}</textarea><p>The <code>Provider</code> component accepts a value prop to be passed to consuming components that are descendants of this <code>Provider</code>.</p><h2><a name="consuming-context-values-via-consumer" id="consuming-context-values-via-consumer">Consuming Context Values via <code>Consumer</code></a></h2><p>To get a value we need to use the <code>Consumer</code> component:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-5cOX8" id="cm-5cOX8">import React from 'react';

const UserName: React.FC = () =&gt; {
  return (
    &lt;UserContext.Consumer&gt;
      {value =&gt; (
        &lt;p&gt;{value.name}&lt;/p&gt;
      )}
    &lt;/UserContext.Consumer&gt;
  )
}</textarea><p>It uses a <code><a href="https://reactjs.org/docs/render-props.html#using-props-other-than-render" rel="noopener noreferrer nofollow">render-prop</a></code><a href="https://reactjs.org/docs/render-props.html#using-props-other-than-render" rel="noopener noreferrer nofollow"> pattern</a>. This means that it accepts a function instead of a component as a child. It will then pass a context value as an argument to this function.</p><h2><a name="consuming-context-values-via-hooks" id="consuming-context-values-via-hooks">Consuming Context Values via Hooks</a></h2><p>You can also use <code><a href="https://reactjs.org/docs/hooks-reference.html#usecontext" rel="noopener noreferrer nofollow">useContext</a></code><a href="https://reactjs.org/docs/hooks-reference.html#usecontext" rel="noopener noreferrer nofollow"> hook</a> to get access to a context value. This makes the component's source much simpler and cleaner.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-14NFe" id="cm-14NFe">import React, {useContext} from 'react';

const UserName: React.FC = () =&gt; {
  // `user` will have the `User` type.
  const user = useContext(UserContext);
  return &lt;p&gt;{user.name}&lt;/p&gt;
}</textarea><h2><a name="sources" id="sources">Sources</a></h2><ul><li><p><a href="https://reactjs.org/docs/context.html" rel="noopener noreferrer nofollow">React Context</a></p></li><li><p><a href="https://www.typescriptlang.org/docs/handbook/generics.html" rel="noopener noreferrer nofollow">Generics in TypeScript</a></p></li><li><p><code><a href="https://www.typescriptlang.org/docs/handbook/utility-types.html" rel="noopener noreferrer nofollow">Partial</a></code><a href="https://www.typescriptlang.org/docs/handbook/utility-types.html" rel="noopener noreferrer nofollow"> utility type</a></p></li><li><p><code><a href="https://reactjs.org/docs/render-props.html#using-props-other-than-render" rel="noopener noreferrer nofollow">render-prop</a></code><a href="https://reactjs.org/docs/render-props.html#using-props-other-than-render" rel="noopener noreferrer nofollow"> pattern</a></p></li><li><p><code><a href="https://reactjs.org/docs/hooks-reference.html#usecontext" rel="noopener noreferrer nofollow">useContext</a></code><a href="https://reactjs.org/docs/hooks-reference.html#usecontext" rel="noopener noreferrer nofollow"> hook</a></p></li></ul><p></p>

AUTHOR

Alex Bespoyasov

React Context provides a way to pass data through the component tree without having to pass props down manually at every level. Use it when you need to share data “globally”, between many components on different levels to a component tree. To create a context use React.createContext:

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

How to Use React Context with TypeScript

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript