What is useContext Hook in React?

This article provides a comprehensive overview of the useContext Hook in React, a powerful tool designed to manage global state efficiently. You will learn what problem it solves, how it works, and how to implement it in your applications to avoid the complexities of “prop drilling.”

The Problem: Prop Drilling

In a standard React application, data is passed top-down from parent to child components via props. When a deeply nested component needs access to data from a high-level parent, you must pass that data through every intermediate component. This process is known as “prop drilling.” It clutter your code, makes components less reusable, and complicates maintenance.

What is the useContext Hook?

The useContext Hook is a built-in React feature introduced in version 16.8. It provides a way to share values (such as themes, user authentication status, or preferred languages) globally across the entire component tree without having to pass props down manually at every level.

By using useContext, any functional component can access the context data directly, regardless of how deeply nested it is.

How to Implement useContext in 3 Steps

Using the useContext Hook involves three main steps: creating the context, providing the context to the component tree, and consuming the context value.

1. Create the Context

First, you need to initialize the context using the createContext function from React.

import { createContext } from 'react';

const ThemeContext = createContext('light'); // 'light' is the default value

2. Provide the Context

Wrap the components that need access to the shared data with the Provider component. Pass the data you want to share into the value prop.

import React, { useState } from 'react';
import { ThemeContext } from './ThemeContext';
import DisplayComponent from './DisplayComponent';

function App() {
  const [theme, setTheme] = useState('dark');

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

export default App;

3. Consume the Context

In any child component inside the provider, import the useContext Hook and the context object you created to access the value directly.

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function DisplayComponent() {
  const theme = useContext(ThemeContext);

  return (
    <div style={{ 
      background: theme === 'dark' ? '#333' : '#FFF', 
      color: theme === 'dark' ? '#FFF' : '#333' 
    }}>
      The current theme is {theme}.
    </div>
  );
}

export default DisplayComponent;

When Should You Use useContext?

While useContext is highly useful, it should not be used for all state management. It is best suited for:

• Global configurations: Application themes, language preferences, and localization settings.
• Authentication state: Managing current user profiles, permissions, and login states.
• Static data: Sharing data that rarely changes and is needed by many components.

For complex, highly dynamic state changes or heavy data flows, dedicated state management libraries like Redux or Zustand may still be preferred.