In this article we will look at how to use React context to share information globally between multiple components. This is useful in cases when some data should be available to different components in your application. Currently logged in user, selected visual theme, and current locale are good examples of such information.

We know that props are the main way to propagate information from parent components to their children in React. Let’s assume that we have got a page with a header. In a header we have got a menu in which we’d like to display a currently selected theme with either a sun or a moon symbol. Here’s the code for that example:

class MyComponent extends React.Component {
  render() {
    // specify "day" or "night" as value
    return <Page theme="night" />;
  }
}

class Page extends React.Component {
  render() {
    return <Header theme={this.props.theme} />;
  }
}

class Header extends React.Component {
  render() {
    return <HeaderMenu theme={this.props.theme} />;
  }
}

class HeaderMenu extends React.Component {
  render() {
    return <ThemedIcon theme={this.props.theme} />;
  }
}

class ThemedIcon extends React.Component {
  render() {
    return this.props.theme === 'night' ? <div>🌜</div> : <div>☼</div>;
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('app'));

In this example we’ve got a hierarchy of components in which we propagate 

 property, they must pass it through to deliver it to the 

With this code It’s hard to tell which properties are needed by intermediate components and which are just being passed down the hierarchy. This makes code hard to maintain and refactor. If we’ll need to move the 

 component somewhere else, we’d have to refactor intermediate components to remove unused props. And for a new parent component of 

 property. It becomes event more convoluted if we want to use the 

 value in multiple components in different parts of our React application.

React context may improve your code in cases when some property needs to be globally available.

To make some information globally available we need to create a context for it first. This is done with 

const ThemeContext = React.createContext('day');

We create a new context and pass a default value for it.

Next, we can use the Provider React component of a newly created context to propagate its value to React components.

const ThemeContext = React.createContext('day');

class MyComponent extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="night">
        <Page theme="night" />
      </ThemeContext.Provider>
    );
  }
}

 React component to wrap components that may use its value. This makes the context available to all descendant components.

Additionally, we specify a value to be provided. If we will not specify the 

, context’s default value will not be used. Default value specified in the 

Finally, we can consume the provider’s value. This can be done in multiple ways.

For a class component we can define a context provider to use with the 

class ThemedIcon extends React.Component {
  render() {
    // use this.context to access value
    return this.context === 'night' ? <div>🌜</div> : <div>☼</div>;
  }
}

// Set ThemeContext as the context for component
ThemedIcon.contextType = ThemeContext;

 property. This allows to reference its value in the component using 

Every context provides a Consumer React component that can be used to access the context:

class ThemedIcon extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {theme => (theme === 'night' ? <div>🌜</div> : <div>☼</div>)}
      </ThemeContext.Consumer>
    );
  }
}

 is a React component that expects a function as its child. It passes the context’s value to this function. The function should return a React component to render.

 hook to access the context’s value. This is a great way to consume a context from functional React components. Let’s convert the 

 component from a class to functional component and leverage the 

const ThemedIcon = (props) => {
    const theme = useContext(ThemeContext);
    return theme === 'night' ? (<div>🌜</div>) : (<div>☼</div>);
}

In this article we’ve looked at how to use React context to share data between multiple components. This is a good way to use data that should be available globally across your React application.

<h1 data-node-type="titlePlaceholder">How to Use React Context</h1><p>In this article we will look at how to use React context to share information globally between multiple components. This is useful in cases when some data should be available to different components in your application. Currently logged in user, selected visual theme, and current locale are good examples of such information.</p><p>We know that props are the main way to propagate information from parent components to their children in React. Let’s assume that we have got a page with a header. In a header we have got a menu in which we’d like to display a currently selected theme with either a sun or a moon symbol. Here’s the code for that example:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-Jdo75" id="cm-Jdo75">class MyComponent extends React.Component {
  render() {
    // specify "day" or "night" as value
    return &lt;Page theme="night" /&gt;;
  }
}

class Page extends React.Component {
  render() {
    return &lt;Header theme={this.props.theme} /&gt;;
  }
}

class Header extends React.Component {
  render() {
    return &lt;HeaderMenu theme={this.props.theme} /&gt;;
  }
}

class HeaderMenu extends React.Component {
  render() {
    return &lt;ThemedIcon theme={this.props.theme} /&gt;;
  }
}

class ThemedIcon extends React.Component {
  render() {
    return this.props.theme === 'night' ? &lt;div&gt;🌜&lt;/div&gt; : &lt;div&gt;☼&lt;/div&gt;;
  }
}

ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById('app'));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fembed%2Fpreview%2FXWJpEzg%3Fheight%3D600%26slug-hash%3DXWJpEzg%26default-tabs%3Djs%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io&amp;url=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fpen%2FXWJpEzg%3Feditors%3D0010&amp;image=https%3A%2F%2Fscreenshot.codepen.io%2F3885452.XWJpEzg.small.98f70f1b-1728-4b89-9fc4-715972a41d2c.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codepen" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example we’ve got a hierarchy of components in which we propagate <code>theme</code> property from the <code>Page</code> component to the <code>ThemedIcon</code> component. Even if intermediate <code>Header</code> and <code>HeaderMenu</code> components don’t leverage the <code>theme</code> property, they must pass it through to deliver it to the <code>ThemedIcon</code> component.</p><p>With this code It’s hard to tell which properties are needed by intermediate components and which are just being passed down the hierarchy. This makes code hard to maintain and refactor. If we’ll need to move the <code>ThemedIcon</code> component somewhere else, we’d have to refactor intermediate components to remove unused props. And for a new parent component of <code>ThemedIcon</code> we’d have to add the <code>theme</code> property. It becomes event more convoluted if we want to use the <code>theme</code> value in multiple components in different parts of our React application.</p><p>React context may improve your code in cases when some property needs to be globally available.</p><h2>Working with React context</h2><p>To make some information globally available we need to create a context for it first. This is done with <code>React.createContext</code> function:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-EXBOZ" id="cm-EXBOZ">const ThemeContext = React.createContext('day');</textarea><p>We create a new context and pass a default value for it.</p><p>Next, we can use the Provider React component of a newly created context to propagate its value to React components.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-LEaEM" id="cm-LEaEM">const ThemeContext = React.createContext('day');

class MyComponent extends React.Component {
  render() {
    return (
      &lt;ThemeContext.Provider value="night"&gt;
        &lt;Page theme="night" /&gt;
      &lt;/ThemeContext.Provider&gt;
    );
  }
}</textarea><p>We use the <code>ThemeContext.Provider</code> React component to wrap components that may use its value. This makes the context available to all descendant components.</p><p>Additionally, we specify a value to be provided. If we will not specify the <code>value</code> property of the Provider it will be <code>undefined</code>, context’s default value will not be used. Default value specified in the <code>React.createContext</code> will be used only if there will be no <code>Context.Provider</code> component available.</p><p>Finally, we can consume the provider’s value. This can be done in multiple ways.</p><h3>Using Class.contextType</h3><p>For a class component we can define a context provider to use with the <code>contextType</code> property:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-T7N9g" id="cm-T7N9g">class ThemedIcon extends React.Component {
  render() {
    // use this.context to access value
    return this.context === 'night' ? &lt;div&gt;🌜&lt;/div&gt; : &lt;div&gt;☼&lt;/div&gt;;
  }
}

// Set ThemeContext as the context for component
ThemedIcon.contextType = ThemeContext;</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fembed%2Fpreview%2FabzpjWy%3Fheight%3D600%26slug-hash%3DabzpjWy%26default-tabs%3Djs%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io&amp;url=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fpen%2FabzpjWy%3Feditors%3D0010&amp;image=https%3A%2F%2Fscreenshot.codepen.io%2F3885452.abzpjWy.small.4073fd1f-830d-4685-97ce-1dcbd7e2a0f8.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codepen" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example we’re defining <code>ThemeContext</code> as a value for the <code>contextType</code> property. This allows to reference its value in the component using <code>this.context</code>.</p><h3>Using Context.Consumer</h3><p>Every context provides a Consumer React component that can be used to access the context:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-LHk4X" id="cm-LHk4X">class ThemedIcon extends React.Component {
  render() {
    return (
      &lt;ThemeContext.Consumer&gt;
        {theme =&gt; (theme === 'night' ? &lt;div&gt;🌜&lt;/div&gt; : &lt;div&gt;☼&lt;/div&gt;)}
      &lt;/ThemeContext.Consumer&gt;
    );
  }
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fembed%2Fpreview%2FvYEgaJV%3Fheight%3D600%26slug-hash%3DvYEgaJV%26default-tabs%3Djs%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io&amp;url=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fpen%2FvYEgaJV%3Feditors%3D0010&amp;image=https%3A%2F%2Fscreenshot.codepen.io%2F3885452.vYEgaJV.small.3e569aca-7b9d-4c01-94b4-c8e111ffb6a0.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codepen" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p><code>ThemeContext.Consumer</code> is a React component that expects a function as its child. It passes the context’s value to this function. The function should return a React component to render.</p><h3>Using Hooks</h3><p>We can use the <code><a href="https://reactjs.org/docs/hooks-reference.html#usecontext" rel="noopener noreferrer nofollow">useContext</a></code> hook to access the context’s value. This is a great way to consume a context from functional React components. Let’s convert the <code>ThemedIcon</code> component from a class to functional component and leverage the <code>useContext</code> hook to access a context:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-8iJab" id="cm-8iJab">const ThemedIcon = (props) =&gt; {
    const theme = useContext(ThemeContext);
    return theme === 'night' ? (&lt;div&gt;🌜&lt;/div&gt;) : (&lt;div&gt;☼&lt;/div&gt;);
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fembed%2Fpreview%2FxxbgaZy%3Fheight%3D600%26slug-hash%3DxxbgaZy%26default-tabs%3Djs%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io&amp;url=https%3A%2F%2Fcodepen.io%2Fdmitryrogozhny%2Fpen%2FxxbgaZy%3Feditors%3D0010&amp;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fm.cdpn.io%2Fscreenshot-coming-soon-small.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codepen" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We leverage the <code>useContext</code> hook to access our <code>ThemeContext</code>.</p><h2>Summary</h2><p>In this article we’ve looked at how to use React context to share data between multiple components. This is a good way to use data that should be available globally across your React application.</p>

AUTHOR

Dmitry Rogozhny

In this article we will look at how to use React context to share information globally between multiple components. This is useful in cases when some data should be available to different components in your application. Currently logged in user, selected visual theme, and current locale are good…

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

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript