React useContext Hook

• useContext is a React hook that allows functional components to subscribe to a React context, enabling them to read shared data without manually passing props through every level of the component tree.

Purpose

• Simplifies data sharing: It provides a clean way to access global data (like themes, user settings, or authentication status) across your entire application.
• Eliminates the "middleman": You no longer need to use <Context.Consumer> render props, which often led to "wrapper hell" and messy JSX.
• Improves code readability: By using a simple hook, your component logic stays focused on what it does, rather than how it receives data.

Syntax

• First, import useContext from the 'react' library.
• Call useContext and pass the entire Context Object (the one created by createContext) as an argument.

import React, { useContext } from 'react';

// 1. Create the context
const MyContext = React.createContext();

const MyComponent = () => {
  // 2. Consume the context value
  const contextValue = useContext(MyContext);

  return (
    <div>
      <p>Value from context: {contextValue}</p>
    </div>
  );
};

Using useContext

• To use context, you need a Provider to wrap your components and a Hook to consume the value.

import React, { createContext, useContext } from 'react';

// Step 1: Create the context
const MyContext = createContext();

const ParentComponent = () => {
  return (
    // Step 2: Provide the value to the tree
    <MyContext.Provider value="Hello from Context!">
      <ChildComponent />
    </MyContext.Provider>
  );
};

const ChildComponent = () => {
  // Step 3: Access the value directly
  const contextValue = useContext(MyContext);

  return (
    <div>
      <p>The message is: {contextValue}</p>
    </div>
  );
};

Dynamic Context Value

• Context becomes powerful when paired with useState. When the state in the Provider updates, every component using useContext will automatically re-render with the fresh data.

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

const MyContext = createContext();

const DynamicContextComponent = () => {
  const [contextValue, setContextValue] = useState('Initial Value');

  return (
    <MyContext.Provider value={contextValue}>
      <ChildComponent />
      <button onClick={() => setContextValue('Updated Value')}>
        Update Context
      </button>
    </MyContext.Provider>
  );
};

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

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

Problem and Solution

React context provides a way to pass data through the component tree without having to pass props down manually at every level. While useContext simplifies the process of consuming context values, let's explore the context-related challenges it addresses:

Prop Drilling

• Problem: In a deeply nested component tree, you might have data at the top level (like a User ID) that is needed 5 levels deep. You end up passing that prop through components that don't even use it, just to get it to the destination. This is called "Prop Drilling."
• Solution: Context allows you to "broadcast" data. Any component in the tree can "tune in" and grab exactly what it needs, skipping the intermediate levels entirely.

Component Composition

• Problem: Managing unrelated props can make components messy. If a Layout component has to handle theme, userAuth, and language props just to pass them to children, it becomes hard to reuse.
• Solution: With useContext, your components become more modular. A Button can grab the theme directly, leaving the Layout component clean and focused only on its own structure.

Consuming Context in Functional Components

• Problem: Before Hooks, functional components had to use a <Context.Consumer> component which required a function as a child. This led to complex nesting (callback hell) if you needed to use multiple contexts.
• Solution: useContext makes context feel like a standard variable. You can call multiple hooks in a row, making your code flat and easy to read.

Avoiding Prop Drilling for Global Data

• Problem: Global data like "Current Language" or "Dark Mode" is needed by almost every component. Passing these as props everywhere is unsustainable.
• Solution: Context provides a centralized "Store" for this data. It acts as a single source of truth that is accessible globally within the Provider's scope.

Example Use Case

A common real-world scenario is managing a user's login session. Instead of asking every page if the user is logged in, we use an AuthContext:

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

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const login = (name) => setUser({ name, role: 'Admin' });
  const logout = () => setUser(null);

  // We pass both the state and the updater functions
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

const UserProfile = () => {
  // Destructure exactly what we need from the context
  const { user, logout } = useContext(AuthContext);

  if (!user) return <p>Please log in.</p>;

  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <button onClick={logout}>Logout</button>
    </div>
  );
};

const App = () => {
  return (
    <AuthProvider>
      <nav>My App Navbar</nav>
      <UserProfile />
    </AuthProvider>
  );
};

In this example, UserProfile can access the user's name and the logout function directly. It doesn't matter how many layers of navigation or containers are between App and UserProfile the data is always just one hook away.

Summary

The useContext hook is an essential tool in the modern React developer's toolkit. It effectively solves the problem of prop drilling and makes global state management (like themes and auth) significantly easier to implement and maintain. While it doesn't replace complex state libraries like Redux for every scenario, it is often more than enough for most standard applications.