How to Use useContext in React: Simple Guide with Examples

In React, useContext lets you access data from a context object created by React.createContext. Wrap components with a Context.Provider to share values, then call useContext(MyContext) inside any child component to read that shared data.

Syntax

The useContext hook takes a context object created by React.createContext and returns the current context value. This value is determined by the nearest matching Context.Provider above in the component tree.

• const MyContext = React.createContext(defaultValue); creates a context.
• <MyContext.Provider value={someValue}>...</MyContext.Provider> provides the value.
• const value = useContext(MyContext); reads the value inside a component.

jsx

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

const MyContext = createContext('default');

function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

function App() {
  return (
    <MyContext.Provider value="Hello from context">
      <MyComponent />
    </MyContext.Provider>
  );
}

Output

Hello from context

Example

This example shows how to create a context, provide a value, and consume it in a child component using useContext. The child component displays the shared value without passing props.

jsx

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

const ThemeContext = createContext('light');

function DisplayTheme() {
  const theme = useContext(ThemeContext);
  return <p>The current theme is <strong>{theme}</strong>.</p>;
}

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

Output

The current theme is dark.

Common Pitfalls

• Not wrapping components with the Provider causes useContext to return the default value, which may be unexpected.
• Using multiple contexts requires calling useContext separately for each context.
• Changing context value triggers re-render for all consuming components, so avoid passing new objects or functions inline unless memoized.

jsx

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

const CountContext = createContext(0);

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

// Wrong: Not wrapped in Provider, will show default 0
function AppWrong() {
  return <DisplayCount />;
}

// Right: Wrapped in Provider with value 5
function AppRight() {
  return (
    <CountContext.Provider value={5}>
      <DisplayCount />
    </CountContext.Provider>
  );
}

Output

AppWrong output: Count is 0
AppRight output: Count is 5

Quick Reference

Remember these key points when using useContext:

• Create context with createContext(defaultValue).
• Wrap components with Context.Provider to supply values.
• Call useContext(Context) inside functional components to read the current value.
• Context updates cause all consuming components to re-render.
• Use context to avoid passing props through many layers.

Key Takeaways

Use useContext to access shared data from a context provider without props drilling.

Always wrap components with Context.Provider to supply the context value.

Calling useContext outside a provider returns the default context value.

Context updates re-render all consuming components, so optimize value changes.

Use separate contexts for unrelated data to keep components efficient.