React js Context API Practice Questions with Solutions

By /

Introduction

Context API in React provides a way to make data available to multiple components without passing props through every level of the component tree. It is useful for values such as themes, language settings, authentication information, or other data needed by many components. In this chapter, we will solve practical questions covering Context creation, Providers, consuming context, updating context values, and common use cases. React js Context API practice questions with solutions help to understand the concepts.

1. What is Context API in React?

Context API is a React feature that allows components to access shared values without manually passing props through every intermediate component.

For example, suppose data needs to travel through several components:

App
 ↓
Dashboard
 ↓
Profile
 ↓
User

Without Context, we may need to pass the same prop through multiple components.

Context can make the value available to components that need it.

A simple Context can be created using:

import { createContext } from "react";

const UserContext = createContext(null);

The Context can then be provided to a part of the component tree.

2. Why is Context API used in React?

Context API is mainly used when multiple components need access to the same data and passing that data through many levels of props becomes inconvenient.

Common examples include:

  • Theme settings
  • Current language
  • Authentication information
  • User preferences
  • Application-level settings

For example:

const ThemeContext = createContext("light");

A component deep inside the tree can consume the context without receiving the theme through every intermediate component.

Context does not automatically make all application state global. It is a mechanism for making a value available to a subtree of components.

3. How do you create a Context in React?

The createContext() function is used to create a Context.

Example:

import { createContext } from "react";

const ThemeContext = createContext("light");

export default ThemeContext;

Here:

  • ThemeContext is the Context object.
  • "light" is the default value.
  • Components can later consume this Context.

The default value is used when a component reads the Context without a matching Provider above it.

4. What is a Context Provider?

A Provider is used to make a Context value available to components below it in the component tree.

Example:

import { createContext } from "react";

const ThemeContext = createContext("light");

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

Here, Dashboard and its descendants can read the value:

ThemeContext.Provider
        ↓
    Dashboard
        ↓
     Profile
        ↓
      Button

The Provider controls the value supplied to that part of the tree.

5. How do you provide an object through Context?

A Context Provider can provide an object as its value.

Example:

import { createContext } from "react";

const UserContext = createContext(null);

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

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

The Profile component can access the object through Context.

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

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

Context values can be any JavaScript value, including objects, arrays, functions, and primitives.

6. How do you access Context data using useContext?

The useContext() Hook allows a function component to read the value from a Context.

Example:

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

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

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

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

The important part is:

const theme = useContext(ThemeContext);

React reads the value from the nearest matching Provider above the component.

7. How do you update Context data using useState?

Context can provide both a state value and a function that updates it.

Example:

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

const ThemeContext = createContext(null);

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

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

The child component can consume both:

function Page() {
  const { theme, setTheme } = useContext(ThemeContext);

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

      <button onClick={() => setTheme("dark")}>
        Dark Mode
      </button>
    </div>
  );
}

Here:

  • App owns the state.
  • Context makes the state and updater available.
  • Page can read and update the state.

8. How does Context API reduce Prop Drilling?

Prop drilling happens when a value is passed through components that do not actually need to use it.

For example:

App
 ↓ user
Dashboard
 ↓ user
Profile
 ↓ user
UserInfo

Dashboard and Profile may only pass user to another component.

With Context:

<UserContext.Provider value={user}>
  <Dashboard />
</UserContext.Provider>

UserInfo can directly read the value:

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

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

This can make deeply shared data easier to access.

However, Context is not automatically the best solution for every prop. For simple parent-to-child data, normal props are often clearer.

9. Can multiple Context Providers be used in the same React application?

Yes. An application can have multiple Contexts for different types of shared data.

Example:

<ThemeContext.Provider value={theme}>
  <UserContext.Provider value={user}>
    <LanguageContext.Provider value={language}>
      <App />
    </LanguageContext.Provider>
  </UserContext.Provider>
</ThemeContext.Provider>

Here, different Contexts manage different values:

  • ThemeContext → theme
  • UserContext → user information
  • LanguageContext → language

A component can consume the Contexts it needs.

For example:

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

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Theme: {theme}</p>
    </div>
  );
}

Using separate Contexts can help keep unrelated data organized.

10. How do you build a practical Theme Context using Context API?

Let’s create a simple theme system.

First, create the Context:

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

const ThemeContext = createContext(null);

Now create the parent component:

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

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

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

Now the Home component can consume the Context:

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

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

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

export default App;

How it works

  • ThemeContext stores the shared Context definition.
  • App owns the theme state.
  • ThemeContext.Provider provides theme and toggleTheme.
  • Home reads them using useContext().
  • Clicking the button updates the state in App.
  • The updated value is provided to consuming components.

This is a practical example of using Context to share state and its updater across a component tree.

Key Takeaways

  • Context API allows values to be made available to components without passing props through every level.
  • createContext() creates a Context.
  • A Provider supplies a value to components below it.
  • useContext() reads a Context value in a function component.
  • Context can provide strings, numbers, objects, arrays, functions, and other values.
  • Context can reduce prop drilling.
  • Context does not automatically make state global.
  • State can be combined with Context to provide shared state and update functions.
  • Multiple Contexts can be used in the same application.
  • Normal props are often better for simple, direct parent-to-child data.
  • Use Context when sharing a value across a component subtree makes the code clearer.

FAQs

1. What is Context API in React?

Context API is a React feature that allows a value to be made available to components in a component subtree without passing it through every intermediate component using props.

2. What is createContext() in React?

createContext() creates a Context object that can be used with a Provider and consumed by components.

3. What is a Context Provider?

A Context Provider supplies a value to its descendant components through a Context.

4. How do you access Context data in a component?

In a function component, you can use the useContext() Hook to read the value from a Context.

5. Does Context API replace props?

No. Props are still the normal and useful way to pass data between directly related components. Context is helpful when a value needs to be accessed by many components across a subtree.

6. Does Context API make state global?

Not automatically. Context makes a value available to components below a Provider. If the value is state, its owner is still the component that manages that state.

7. Can Context API be used with useState?

Yes. A component can use useState() and provide the state value and update function through Context.

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

Related Posts

Scroll to Top