How to Create Context in React: Simple Guide with Examples

In React, you create context using React.createContext() which returns a Context object. You then use the Provider component from this object to supply data, and useContext hook to consume that data in child components.

Syntax

To create context in React, use React.createContext(). This returns a Context object with two main parts:

• Provider: Wraps components and provides the context value.
• Consumer or useContext hook: Used inside components to access the context value.

The Provider accepts a value prop that holds the data you want to share.

javascript

const MyContext = React.createContext(defaultValue);

// Usage in JSX
<MyContext.Provider value={someValue}>
  {/* child components */}
</MyContext.Provider>

// To consume context in a functional component
const value = React.useContext(MyContext);

Example

This example shows how to create a context to share a theme color across components without passing props manually.

javascript

import React, { createContext, useContext } from 'react';

// Create context with default value
const ThemeContext = createContext('light');

function ThemedButton() {
  // Consume context value
  const theme = useContext(ThemeContext);
  return <button style={{ backgroundColor: theme === 'dark' ? '#333' : '#eee', color: theme === 'dark' ? '#eee' : '#333' }}>
    Current theme: {theme}
  </button>;
}

export default function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

Output

A button with dark background and light text showing 'Current theme: dark'

Common Pitfalls

Common mistakes when creating and using context include:

• Not wrapping components with the Provider, so context value is always the default.
• Trying to consume context outside of a Provider which leads to unexpected default values.
• Updating context value incorrectly by mutating objects instead of providing new values, causing components not to re-render.

javascript

import React, { createContext, useContext } from 'react';

const CountContext = createContext(0);

function DisplayCount() {
  const count = useContext(CountContext);
  return <div>Count: {count}</div>;
}

// Wrong: Not wrapping with Provider, count will always be 0 (default)
function AppWrong() {
  return <DisplayCount />;
}

// Right: Wrap with Provider to supply actual value
function AppRight() {
  return (
    <CountContext.Provider value={5}>
      <DisplayCount />
    </CountContext.Provider>
  );
}

Quick Reference

• Create context: const MyContext = React.createContext(defaultValue);
• Provide context: Wrap components with <MyContext.Provider value={value}>
• Consume context: Use const value = useContext(MyContext); inside functional components
• Default value: Used when no Provider wraps the component

Key Takeaways

Use React.createContext() to create a context object with a default value.

Wrap components with the Provider to supply context data.

Use the useContext hook inside functional components to access context values.

Always provide a new value to Provider to trigger re-renders.

Without a Provider, components receive the default context value.