useContext

React’s useContext Hook is a powerful tool that allows components to access global data without passing props manually at every level of the component tree. It helps manage state and share data like themes, user info, or language settings across components easily.

Why Use useContext?

Normally in React, data is passed from parent to child components using props. But when the same data needs to be accessed by many components at different levels, prop-drilling (passing props through many components) becomes messy.

useContext solves this problem by giving components direct access to shared data stored in a Context object.

How useContext Works

To use useContext, you need to:

1. Create a Context
2. Provide the Context to your app
3. Consume the Context using useContext

Let’s break it down.

1. Create a Context

import React, { createContext } from 'react';

const ThemeContext = createContext();

Here, we’re creating a context called ThemeContext.

2. Provide the Context

Wrap your component tree (or part of it) with the ThemeContext.Provider and pass the value you want to share.

<ThemeContext.Provider value="dark">
  <App />
</ThemeContext.Provider>

Now, all components inside <App /> can access the value "dark" using useContext.

3. Use the Context

Inside any component, use useContext to consume the context value.

import React, { useContext } from 'react';

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Click Me</button>;
}

Here, the theme value will be "dark" from the provider. No need to pass it down via props.

Real-Life Example

Imagine you have a login system. Instead of passing user data manually to every component, use a context.

Create User Context

import { createContext } from 'react';

export const UserContext = createContext();

Provide User Data

<UserContext.Provider value={{ name: 'Kirti', role: 'Admin' }}>
  <Dashboard />
</UserContext.Provider>

Use in Component

import { useContext } from 'react';
import { UserContext } from './UserContext';

function Welcome() {
  const user = useContext(UserContext);
  return <h2>Welcome, {user.name}!</h2>;
}

No props needed — Welcome component gets data directly using useContext.

Benefits of useContext

No prop drilling
Cleaner and readable code
Easy global state sharing
Works great with useReducer or state managers

When Not to Use useContext

While useContext is handy, avoid using it for frequently changing data like form inputs or animations. For such cases, use local state (useState) for better performance.

Summary

• useContext is a React Hook for consuming data from a Context.
• It helps avoid prop drilling by giving direct access to shared values.
• It’s best used for global data like themes, authentication, or user info.
• Always use it with a Context provider (<Context.Provider>).

Quick Example:

const MyContext = createContext();

function Parent() {
  return (
    <MyContext.Provider value="Hello from Context!">
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  const value = useContext(MyContext);
  return <p>{value}</p>; // Output: Hello from Context!
}

By using useContext, your React apps become more maintainable, especially as they grow larger.