React js useContext Hook Practice Questions with Solutions

Introduction

The useContext Hook in React allows a function component to read and subscribe to a Context value. It is useful when data needs to be accessed by multiple components without passing props through every intermediate component. Common examples include themes, user information, language settings, and application preferences. In this chapter, we will solve practical questions covering useContext(), Providers, shared values, state updates, and multiple Contexts. React js useContext Hook Practice Questions with Solutions help to understand the concepts.

1. What is the useContext Hook in React?

useContext() is a React Hook used to read a Context value inside a function component.

Example:

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

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

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

  return <h2>Theme: {theme}</h2>;
}

Here:

const theme = useContext(ThemeContext);

reads the current value from ThemeContext.

The component reads the value from the nearest matching Provider above it.

2. Why is useContext used in React?

useContext() is used when a component needs access to a Context value without receiving that value through props.

For example, a theme may be needed by several components:

const ThemeContext = createContext("light");

Instead of passing theme through multiple components:

App
 ↓ theme
Dashboard
 ↓ theme
Profile
 ↓ theme
Button

The Button component can consume the Context directly:

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

  return <button>{theme} Button</button>;
}

This can reduce unnecessary prop passing through intermediate components.

3. How do you create a Context and use it with useContext?

First, create a Context using createContext():

import { createContext, useContext } from "react";

const UserContext = createContext(null);

Then provide a value:

function App() {
  const user = {
    name: "Aman",
    role: "Student"
  };

  return (
    <UserContext.Provider value={user}>
      <Profile />
    </UserContext.Provider>
  );
}

Now consume it:

function Profile() {
  const user = useContext(UserContext);

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.role}</p>
    </div>
  );
}

The Context value is available to Profile because it is inside the Provider.

4. What happens when useContext is used without a Provider?

A Context can have a default value.

Example:

const ThemeContext = createContext("light");

If a component uses:

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

  return <h2>{theme}</h2>;
}

without a matching Provider above it, the component receives the default value:

light

However, if the Context was created with null:

const UserContext = createContext(null);

then consuming it without a Provider gives:

null

The default value is useful as a fallback and for establishing the expected shape of the Context value.

5. How do you use useContext with useState?

useContext() can read a state value and its updater when the Provider supplies them.

Example:

import {
  createContext,
  useContext,
  useState
} from "react";

const CounterContext = createContext(null);

function App() {
  const [count, setCount] = useState(0);

  return (
    <CounterContext.Provider value={{ count, setCount }}>
      <Counter />
    </CounterContext.Provider>
  );
}

The child component can consume both:

function Counter() {
  const { count, setCount } = useContext(CounterContext);

  return (
    <div>
      <h2>{count}</h2>

      <button onClick={() => setCount(c => c + 1)}>
        Increase
      </button>
    </div>
  );
}

Here, App owns the state, while Context makes the state and updater available to descendant components.

6. How do you update a Context value using useContext?

A common pattern is to provide both the value and a function that changes it.

Example:

const ThemeContext = createContext(null);

function App() {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme(current =>
      current === "light" ? "dark" : "light"
    );
  };

  return (
    <ThemeContext.Provider
      value={{ theme, toggleTheme }}
    >
      <Home />
    </ThemeContext.Provider>
  );
}

The child can update the Context-backed state:

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

  return (
    <div>
      <h2>Current Theme: {theme}</h2>

      <button onClick={toggleTheme}>
        Change Theme
      </button>
    </div>
  );
}

The important point is that useContext() reads the provided value. The actual state update is performed by the function supplied by the Provider.

7. How do you use useContext with multiple components?

A single Context value can be consumed by multiple components inside its Provider.

Example:

const UserContext = createContext(null);

function App() {
  const user = {
    name: "Riya",
    course: "React.js"
  };

  return (
    <UserContext.Provider value={user}>
      <Header />
      <Profile />
      <Dashboard />
    </UserContext.Provider>
  );
}

All three components can consume the same Context:

function Header() {
  const user = useContext(UserContext);

  return <h2>Welcome, {user.name}</h2>;
}

function Profile() {
  const user = useContext(UserContext);

  return <p>Course: {user.course}</p>;
}

function Dashboard() {
  const user = useContext(UserContext);

  return <p>Student: {user.name}</p>;
}

When the Provider’s value changes, components that consume that Context can receive the updated value and re-render as needed.

8. Can you use multiple Contexts with useContext?

Yes. A component can consume multiple Contexts.

For example:

const ThemeContext = createContext("light");
const LanguageContext = createContext("English");

Providers:

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

The component can read both:

function Home() {
  const theme = useContext(ThemeContext);
  const language = useContext(LanguageContext);

  return (
    <div>
      <p>Theme: {theme}</p>
      <p>Language: {language}</p>
    </div>
  );
}

This can help separate unrelated shared data into different Contexts.

9. What is the difference between useContext and props?

Both can be used to pass or access data, but they are useful in different situations.

Props:

function Parent() {
  return <Child name="Riya" />;
}

function Child({ name }) {
  return <h2>{name}</h2>;
}

Props are especially useful for direct component relationships.

useContext:

const UserContext = createContext(null);

function Child() {
  const user = useContext(UserContext);

  return <h2>{user.name}</h2>;
}

Context can be useful when many components across a subtree need access to the same value.

Simple difference

useContext() does not replace props. Both have an important role in React.

10. How do you build a practical User Context using useContext?

Let’s create a simple user information example.

First, create the Context:

import {
  createContext,
  useContext,
  useState
} from "react";

const UserContext = createContext(null);

Create the Provider:

function App() {
  const [user, setUser] = useState({
    name: "Riya",
    role: "Student"
  });

  const changeRole = () => {
    setUser(currentUser => ({
      ...currentUser,
      role: "Developer"
    }));
  };

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

Now consume the Context:

function Profile() {
  const { user, changeRole } = useContext(UserContext);

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Role: {user.role}</p>

      <button onClick={changeRole}>
        Become Developer
      </button>
    </div>
  );
}

export default App;

How it works

• UserContext is created using createContext().
• App owns the user state.
• The Provider supplies user and changeRole.
• Profile reads them using useContext().
• Clicking the button updates the state in App.
• The updated Context value is received by Profile.

This pattern is useful when user information needs to be accessed by several components in an application.

Key Takeaways

• useContext() is a React Hook used to read a Context value.
• Context is created using createContext().
• A Provider supplies the Context value to its descendants.
• useContext() reads the value from the nearest matching Provider above the component.
• Without a Provider, the Context’s default value is used.
• Context can provide state values and update functions together.
• Multiple components can consume the same Context.
• A component can consume multiple Contexts.
• useContext() can reduce prop drilling.
• useContext() does not replace props in every situation.
• The component that owns the state can provide both the state and its updater through Context.

FAQs

1. What is useContext in React?

useContext() is a React Hook that allows a function component to read a value from a Context.

2. Why is useContext used in React?

It is used when components need access to shared data without passing that data through every intermediate component using props.

3. What happens if useContext is used without a Provider?

The component receives the default value defined when the Context was created.

4. Can useContext work with useState?

Yes. A Provider can supply a state value and its update function, which descendant components can access using useContext().

5. Can multiple components use the same Context?

Yes. Multiple components inside the Provider’s subtree can consume the same Context value.

6. Can a component use multiple Contexts?

Yes. A component can call useContext() for multiple different Contexts.

7. Is useContext better than props?

Not always. Props are usually clear and appropriate for direct parent-to-child communication. useContext() is useful when shared data needs to be accessed across a larger component subtree or when prop drilling becomes inconvenient.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar