Context API

The Context API is a built-in React feature that allows you to share data across the entire component tree without having to pass props down manually through every level (a problem known as “prop drilling”).

When to Use Context

Context is designed to share data that can be considered “global” for a tree of React components. Examples include:

The current authenticated user.
UI theme (e.g., light mode vs dark mode).
Preferred language or locale.

How to Use Context

Using Context involves three steps:

1. Create the Context

You create a context object using createContext(). You usually do this in a separate file so it can be imported by different components. The argument passed to createContext is the default value (used only if a component tries to read the context without a Provider above it).

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

export const ThemeContext = createContext('light');

2. Provide the Context

Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes.

The Provider accepts a value prop. This is the data you are actually sharing.

// App.js
import { ThemeContext } from './ThemeContext';

function App() {
  const [theme, setTheme] = useState('dark'); // State to pass down

  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

3. Consume the Context

Any component nested inside the Provider can read the value using the useContext Hook.

// Toolbar.js (or any deeply nested component)
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemedButton() {
  const theme = useContext(ThemeContext);
  
  return <button className={`btn-${theme}`}>I am styled by context!</button>;
}

Context and Re-renders

This is the most critical thing to know about Context: Whenever the value prop of a Provider changes, every single component that consumes that context (via useContext) will re-render.

This happens automatically and cannot be stopped by React.memo or shouldComponentUpdate.

Because of this, you should avoid putting data that changes very rapidly (e.g., cursor coordinates, a high-frequency timer) into a high-level Context Provider, as it will cause widespread re-rendering across your application.

Updating Context from a Child

Often, deeply nested children need to not only read the context but also update it. To achieve this, you pass a state setter function down alongside the data in the Provider’s value.

// Provide an object containing both the value and the setter
<ThemeContext.Provider value={{ theme, setTheme }}>
  <Toolbar />
</ThemeContext.Provider>

// ... later in a child component ...
const { theme, setTheme } = useContext(ThemeContext);
<button onClick={() => setTheme('dark')}>Switch to Dark Mode</button>

Interview Questions

Q: What is the primary purpose of the Context API?
A: Its primary purpose is to share “global” data (like the current authenticated user, theme, or preferred language) deep down the component tree without having to manually pass props through every intermediate level (solving Prop Drilling).