React Hooks: useContext

Introduction

As React applications grow, passing data through multiple components using props becomes difficult and repetitive. This problem is known as prop drilling.

The useContext Hook helps solve this problem by allowing components to access shared data directly, without passing props manually at every level.

This article explains what useContext is, why it is used, how it works, step-by-step examples, best practices, and interview questions, making it suitable for beginners and professionals.

What Is Context in React?

Context provides a way to share data globally across a component tree without passing props down manually.

Common use cases for Context include:

• Theme data
• User authentication details
• Language or locale settings
• Application configuration

What Is useContext?

useContext is a React Hook that allows functional components to consume data from a Context.

It lets you access the nearest value provided by a Context Provider.

Why Use useContext?

Without context, data must be passed through every component layer using props.

With useContext:

• Code becomes cleaner
• Components are less tightly coupled
• Global data becomes easier to manage

Creating and Using Context Step by Step

Step 1: Create Context

import { createContext } from "react";

const ThemeContext = createContext();

export default ThemeContext;

Step 2: Provide Context Value

import ThemeContext from "./ThemeContext";

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

export default App;

Step 3: Consume Context Using useContext

import { useContext } from "react";
import ThemeContext from "./ThemeContext";

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

  return <p>Current theme: {theme}</p>;
}

export default Dashboard;

Using Objects in Context

Context values are often objects instead of simple strings.

<ThemeContext.Provider value={{ theme: "dark", toggleTheme }}>

const { theme, toggleTheme } = useContext(ThemeContext);

This allows sharing both data and functions.

Context with State

import { createContext, useState } from "react";

const UserContext = createContext();

function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

Now any component inside UserProvider can access and update the user state.

useContext vs Props

Common Mistakes with useContext

• Using context for all data
• Forgetting to wrap components with Provider
• Overusing context for frequently changing data
• Creating too many contexts

Best Practices

• Use context only for truly global data
• Split large contexts into smaller ones
• Memoize context values when needed
• Combine context with useReducer for complex logic

Interview Questions and Answers

What is useContext used for?

useContext is used to access shared data from React Context without prop drilling.

Does useContext replace Redux?

No, useContext is suitable for small to medium global state, while Redux is better for large and complex state management.

Can useContext cause re-renders?

Yes, components re-render when the context value changes.

Can we use multiple contexts?

Yes, multiple contexts can be used in the same application.