What is React Context?

3 min readJan 8, 2024

React Context:

React Context is a powerful API in React that enables components to share and access values, such as state or configuration, without the need for prop drilling. This helps in simplifying state management in React applications and enhances the overall efficiency of the component tree.

Example:

(1) Create Context:

// context.js
import { createContext } from 'react';

const MyContext = createContext();
export default MyContext;

(2) Provide Context Value:

// App.js
import React from 'react';
import MyContext from './context';
import ComponentA from './ComponentA';

const App = () => {
  const sharedValue = 'Hello from Context!';

  return (
    <MyContext.Provider value={sharedValue}>
      <ComponentA />
    </MyContext.Provider>
  );
};

export default App;

(3) Consume Context Value:

// ComponentA.js
import React, { useContext } from 'react';
import MyContext from './context';

const ComponentA = () => {
  const contextValue = useContext(MyContext);

  return (
    <div>
      <p>{contextValue}</p>
    </div>
  );
};

export default ComponentA;

In this example, MyContext is created in context.js. The App component provides a value to the context using MyContext.Provider, and ComponentA consumes that value using the useContext hook. This way, ComponentA can access sharedValue without it being passed through props from App.

Scenarios with React Context Providers and different access patterns:

(1) Multiple Contexts with Full Access:

Define multiple contexts, e.g., ContextA and ContextB.
Use separate providers for each context in the component hierarchy.
Components can access their respective contexts using the useContext hook.

Example:

Context Definitions:

// contextA.js
import { createContext } from 'react';
const ContextA = createContext();
export default ContextA;

// contextB.js
import { createContext } from 'react';
const ContextB = createContext();
export default ContextB;

Provider Usage:

// App.js
import React from 'react';
import ContextA from './contextA';
import ContextB from './contextB';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const App = () => {
  const valueA = 'Context Value A';
  const valueB = 'Context Value B';

  return (
    <ContextA.Provider value={valueA}>
      <ContextB.Provider value={valueB}>
        <ComponentA />
        <ComponentB />
      </ContextB.Provider>
    </ContextA.Provider>
  );
};

export default App;

Access in Components:

// ComponentA.js
import React, { useContext } from 'react';
import ContextA from './contextA';

const ComponentA = () => {
  const valueA = useContext(ContextA);
  // Access to ContextA value, it can access valueB as well
  return <div>{valueA}</div>;
};

export default ComponentA;

// ComponentB.js
import React, { useContext } from 'react';
import ContextB from './contextB';

const ComponentB = () => {
  const valueB = useContext(ContextB);
  // Access to ContextB value, it can access valueA as well
  return <div>{valueB}</div>;
};

export default ComponentB;

(2) Hierarchical Providers with Partial Access:

Use a hierarchical structure with nested providers.
Components can selectively access different contexts based on their placement in the hierarchy.
Utilize the useContext hook to access the relevant context values.