The Context API is React's built-in mechanism for sharing values across a component tree without manually passing props down through every intermediate level.

Syntax

const MyContext = createContext(defaultValue);

Deep Dive Course

Context is created with createContext(defaultValue), which returns an object with a Provider component used to supply an actual value further down the tree, and any descendant component can read that value with the useContext hook, regardless of how deeply nested it is. It's specifically designed for data that's genuinely global or cross-cutting across many components, like the current theme, authenticated user, or preferred language, and is React's own, dependency-free alternative to a separate state-management library like Redux for many simpler global-state needs.

1Understanding Context API

💡

Context is React's own built-in tool for avoiding prop drilling — for many applications, especially without deeply complex, frequently-updating global state, it's a perfectly sufficient alternative to bringing in Redux or another external state library.

editor.html

import { createContext, useContext } from 'react';

const LanguageContext = createContext('en');

function Greeting() {
  const lang = useContext(LanguageContext);
  return <p>{lang === 'es' ? 'Hola' : 'Hello'}</p>;
}

localhost:3000

2Practical Example

Here is a real-world application of Context API showing how it is used in production React code.

editor.html

function App() {
  return (
    <LanguageContext.Provider value="es">
      <Greeting />
    </LanguageContext.Provider>
  );
}

localhost:3000

3Best Practices

Follow these guidelines when working with Context API:

1. Use Context for genuinely global, cross-cutting values, like theme or authenticated user, rather than as a blanket replacement for regular parent-to-child props

2. Provide a sensible default value in createContext(), so components consuming the context still behave reasonably if rendered outside of an explicit Provider

3. Consider a dedicated state-management library like Redux instead of Context for very frequently-updating, complex global state, since Context re-renders every consumer on any value change

⚠️

Tip: Context is React's own built-in tool for avoiding prop drilling — for many applications, especially without deeply complex, frequently-updating global state, it's a perfectly sufficient alternative to bringing in Redux or another external state library.

editor.html

import { createContext, useContext } from 'react';

const LanguageContext = createContext('en');

function Greeting() {
  const lang = useContext(LanguageContext);
  return <p>{lang === 'es' ? 'Hola' : 'Hello'}</p>;
}

localhost:3000

Examples

Example 01Basic Usage

import { createContext, useContext } from 'react';

const LanguageContext = createContext('en');

function Greeting() {
  const lang = useContext(LanguageContext);
  return <p>{lang === 'es' ? 'Hola' : 'Hello'}</p>;
}

Example 02Advanced Example

function App() {
  return (
    <LanguageContext.Provider value="es">
      <Greeting />
    </LanguageContext.Provider>
  );
}

Best Practices

Use Context for genuinely global, cross-cutting values, like theme or authenticated user, rather than as a blanket replacement for regular parent-to-child props
Provide a sensible default value in createContext(), so components consuming the context still behave reasonably if rendered outside of an explicit Provider
Consider a dedicated state-management library like Redux instead of Context for very frequently-updating, complex global state, since Context re-renders every consumer on any value change

Interview Question

In what specific situation is Redux, or a similar external state library, generally a better choice than React's built-in Context API for managing shared state?▼

Hint: Think about how often the shared state changes, how many components consume it, and what tools each approach offers for debugging and controlling updates.

Context works well for state that's relatively stable or changes infrequently, since every component consuming a given context re-renders whenever that context's value changes, with no built-in way to select or subscribe to only part of that value — for state that updates very frequently and is consumed by many components throughout the app, that can translate into a meaningful amount of unnecessary re-rendering. Redux, and similar dedicated state-management libraries, provide more granular subscription mechanisms, like useSelector, that let a component re-render only when the specific slice of state it actually cares about changes, along with dedicated developer tools for time-travel debugging and inspecting a clear history of every dispatched action. For simpler applications with less frequently-changing shared state, and no need for that level of tooling, Context alone is often perfectly sufficient and avoids the extra dependency and boilerplate Redux introduces.

Exercises

MediumPractice using Context API in a real scenario.

View Solution

import { createContext, useContext } from 'react';

const LanguageContext = createContext('en');

function Greeting() {
  const lang = useContext(LanguageContext);
  return <p>{lang === 'es' ? 'Hola' : 'Hello'}</p>;
}

Frequently Asked Questions

In what specific situation is Redux, or a similar external state library, generally a better choice than React's built-in Context API for managing shared state?▼

Related Functions

providerusecontextredux