useContext Hook in React

Context and useContext in React

When building a React application, components often need to share data with other components. Normally, we pass data from a parent component to a child component using props. This works well when the components are close to each other. However, when the data needs to travel through several components before reaching the component that actually needs it, the code can become difficult to manage. This problem is known as prop drilling.

Context provides a way to share data between components without having to pass that data manually through props at every level. You can think of Context as a common place where certain data is made available to a group of components. Any component inside that Context can access the shared data directly, even if there are other components between them.

For example, imagine a component structure where App contains Parent, Parent contains Child, and Child contains Profile. If Profile needs the username stored in App, we would normally have to pass the username from App to Parent, then from Parent to Child, and finally to Profile. Context allows us to avoid this unnecessary chain of props.

What is Context?

Context is a React feature that allows data to be shared across multiple components without explicitly passing it through props.

Common types of information that can be shared through Context include:

• Logged-in user information
• Application theme
• Selected language
• Shopping cart data
• Application settings

Context is particularly useful when the same data is required by many components at different levels of the component tree.

What is useContext?

useContext is a React Hook that allows a component to read the value stored in a Context.

A Context itself does not automatically provide data to every component. We normally create a Context, provide a value to it using a Provider, and then use useContext inside a component to access that value.

The basic flow is:

createContext()
      ↓
Create a Context
      ↓
Provider
      ↓
Provide shared data
      ↓
useContext()
      ↓
Read the shared data

For example, we can create a Context like this:

const UserContext = createContext();

Then a Provider can make a value available:

<UserContext.Provider value={username}>
    <App />
</UserContext.Provider>

A component inside the Provider can then access the value using:

const username = useContext(UserContext);

The important idea is that the component does not need to receive username through props. It gets the value directly from the Context.

complete example:

import { createContext, useContext } from "react";

const UserContext = createContext();

function App() {
  const username = "John";

  return (
    <UserContext.Provider value={username}>
      <Parent />
    </UserContext.Provider>
  );
}

function Parent() {
  return <Child />;
}

function Child() {
  return <GrandChild />;
}

function GrandChild() {
  const username = useContext(UserContext);

  return <h1>Hello {username}</h1>;
}

export default App;

Key Points to Remember

• Props are used to pass data from a parent to a child.
• Prop drilling happens when data is passed through components that do not actually need that data.
• Context provides a way to share data with multiple components.
• A Provider supplies the data to the components inside it.
• useContext allows a component to read the data from a Context.
• Context is useful for data that needs to be accessed by many components at different levels.
• Context does not replace useState; they solve different problems. useState manages state, while Context provides a way to share values across components.

The simplest way to remember it is: Context makes shared data available, and useContext allows a component to access that shared data.