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

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