React useContext Hook

The useContext hook allows functional components to consume context values directly, without needing to wrap them in a Consumer. It simplifies state sharing across multiple components and is often used with the Context API for global state management.

What is useContext?

The useContext hook is a React hook that lets you access the current value of a context. Context is designed to share data such as:

Theme settings (light/dark mode)
User authentication info
Language preferences
Any global state or configuration

Without useContext, passing data through props drilling can become cumbersome when multiple nested components need the same data.

Syntax:

const value = useContext(MyContext);

MyContext → A React context object created using React.createContext()
value → The current value of the context

Importing `useContext`:

import React, { useContext } from "react";

Creating Context

Before using useContext, you need a context object:

import React from "react";

const ThemeContext = React.createContext("light"); // default value

Providing Context Value

Use the Context Provider to supply a value to the component tree:

import React from "react";

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

function Toolbar() {
  return (
    <div>
      <ThemeButton />
    </div>
  );
}

Consuming Context with useContext

Instead of using <ThemeContext.Consumer>, you can directly use useContext:

import React, { useContext } from "react";

function ThemeButton() {
  const theme = useContext(ThemeContext); // Access context value

  return (
    <button style={{ background: theme === "dark" ? "#333" : "#eee", color: theme === "dark" ? "#fff" : "#000" }}>
      Current Theme: {theme}
    </button>
  );
}

Multiple Contexts

You can use multiple contexts in a single component by calling useContext multiple times:

const LanguageContext = React.createContext("en");

function MultiContextComponent() {
  const theme = useContext(ThemeContext);
  const language = useContext(LanguageContext);

  return (
    <div>
      <p>Theme: {theme}</p>
      <p>Language: {language}</p>
    </div>
  );
}

Updating Context Value

Context values can be dynamic when stored in state. This allows interactive global data like theme toggles:

import React, { useState, createContext, useContext } from "react";

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState("light");

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

function Toolbar() {
  return (
    <div>
      <ThemeToggleButton />
    </div>
  );
}

function ThemeToggleButton() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Toggle Theme (Current: {theme})
    </button>
  );
}

Benefits of useContext

Simplifies state sharing – Avoids prop drilling
Works with functional components – No need for HOCs or Consumers
Dynamic and reactive – Components re-render automatically when context changes
Clean and readable code – Keeps nested components lightweight

React Handbook