Consuming context in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component using context?

Given the following React context and component, what will be rendered inside the <div>?

React

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function DisplayTheme() {
  const theme = useContext(ThemeContext);
  return <div>{`Current theme is: ${theme}`}</div>;
}

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

A <div>Current theme is: dark</div>

B Error: useContext must be inside a Provider

C <div>Current theme is: undefined</div>

D <div>Current theme is: light</div>

💡 Hint

Remember that the value passed to the Provider overrides the default context value.

The ThemeContext.Provider sets the context value to "dark". The useContext hook inside DisplayTheme reads this value, so it renders "Current theme is: dark".

❓ state_output

intermediate

What is the value of count after clicking the button once?

Consider this React component consuming a context with a count state. What will be the value of count after clicking the button once?

React

import React, { createContext, useContext, useState } from 'react';

const CountContext = createContext();

function Counter() {
  const { count, setCount } = useContext(CountContext);
  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Counter />
      <p>{`Count is: ${count}`}</p>
    </CountContext.Provider>
  );
}

A Count is: 1

B Count is: 0

C Count is: undefined

D Error: setCount is not a function

💡 Hint

Clicking the button calls setCount(count + 1) which updates the state.

The initial count is 0. Clicking the button calls setCount(1), so the count updates to 1 and the paragraph shows "Count is: 1".

📝 Syntax

advanced

Which option correctly consumes context with a default value fallback?

Which code snippet correctly consumes a React context with a default value fallback when no Provider is used?

React

import React, { createContext, useContext } from 'react';

const UserContext = createContext('Guest');

function Welcome() {
  // Fill in the blank
  const user = /* ??? */;
  return <p>Welcome, {user}!</p>;
}

A const user = useContext();

B const user = UserContext.useContext();

C const user = useContext(UserContext);

D const user = UserContext.Consumer();

💡 Hint

Use the useContext hook with the context object as argument.

The correct way to consume context is useContext(UserContext). Options B, C, and D are invalid syntax or usage.

🔧 Debug

advanced

Why does this component throw an error when consuming context?

Given this code, why does DisplayUser throw an error?

React

import React, { createContext, useContext } from 'react';

const UserContext = createContext();

function DisplayUser() {
  const user = useContext(UserContext);
  return <p>User: {user.name}</p>;
}

export default function App() {
  return <DisplayUser />;
}

A DisplayUser must be a class component to consume context

B useContext is called outside a Provider, which is not allowed and throws an error

C UserContext is not created with a default value, so useContext returns null causing error

D user is undefined because no Provider is wrapping DisplayUser, so accessing user.name throws an error

💡 Hint

Check what useContext returns when no Provider is present.

Since UserContext has no default value and no Provider wraps DisplayUser, useContext returns undefined. Accessing user.name causes a runtime error.

🧠 Conceptual

expert

Which option best describes React context consumption behavior?

Choose the statement that correctly describes how React context consumption works with useContext and Providers.

A useContext always returns the default context value regardless of Providers

B useContext returns the nearest Provider's value above in the tree or the default context value if no Provider exists

C useContext requires a Provider to be present or it throws an error

D useContext returns a copy of the Provider's value that cannot be updated

💡 Hint

Think about how context values propagate in React component trees.

useContext reads the value from the nearest Provider above it in the React tree. If no Provider exists, it returns the default value given when creating the context.

Practice

1. What is the primary purpose of using useContext in React?

easy

A. To fetch data from an API

B. To create a new context object

C. To update the state of a component

D. To read shared data from a context inside a component

Solution

1. Step 1: Understand the role of useContext

   useContext is a React hook used to access data from a context object inside a component.

2. Step 2: Differentiate from other hooks

   It does not create context or update state; it only reads the shared data provided by a context.

3. Final Answer:

   To read shared data from a context inside a component -> Option D

4. Quick Check:

   useContext reads context data [OK]

Hint: useContext reads shared data inside components [OK]

Common Mistakes:

• Confusing useContext with creating context
• Thinking useContext updates state
• Using useContext to fetch API data

2. Which of the following is the correct syntax to consume a context named ThemeContext inside a functional component?

easy

A. const theme = useContext(ThemeContext);

B. const theme = ThemeContext.useContext();

C. const theme = useContext();

D. const theme = ThemeContext();

Solution

1. Step 1: Recall the correct useContext syntax

   The hook useContext is called with the context object as an argument: useContext(ThemeContext).

2. Step 2: Identify incorrect options

   Options A, B, and D misuse the hook or context object syntax.

3. Final Answer:

   const theme = useContext(ThemeContext); -> Option A

4. Quick Check:

   useContext requires context object as argument [OK]

Hint: Pass context object inside useContext() [OK]

Common Mistakes:

• Calling useContext without argument
• Using context object as a function
• Trying to call useContext as a method on context

3. Given this code snippet, what will be logged to the console?

const UserContext = React.createContext('Guest');

function DisplayUser() {
  const user = React.useContext(UserContext);
  console.log(user);
  return <div>Hello, {user}!</div>;
}

function App() {
  return (
    <UserContext.Provider value="Alice">
      <DisplayUser />
    </UserContext.Provider>
  );
}

medium

A. "Guest"

B. "Alice"

C. undefined

D. Error: Context not found

Solution

1. Step 1: Identify the context default and provider value

   The default value is "Guest" but the Provider sets the value to "Alice".

2. Step 2: Understand useContext behavior inside Provider

   Since DisplayUser is inside the Provider, it receives the value "Alice" from context.

3. Final Answer:

   "Alice" -> Option B

4. Quick Check:

   Provider value overrides default context [OK]

Hint: Provider value overrides default context value [OK]

Common Mistakes:

• Assuming default context value is always used
• Thinking useContext returns undefined without explicit value
• Confusing Provider and Consumer roles

4. What is the error in the following code that tries to consume a context?

const LanguageContext = React.createContext('English');

function Greeting() {
  const language = useContext(LanguageContext);
  return <h1>Hello in {language}</h1>;
}

function App() {
  return <Greeting />;
}

medium

A. LanguageContext must be a function, not an object

B. Greeting component must be a class component

C. useContext is not imported or defined

D. Context value must be passed as a prop

Solution

1. Step 1: Check useContext usage

   The code uses useContext but does not import or prefix it with React.

2. Step 2: Identify missing import or reference

   Without importing useContext from React or using React.useContext, this causes a ReferenceError.

3. Final Answer:

   useContext is not imported or defined -> Option C

4. Quick Check:

   useContext must be imported or accessed via React [OK]

Hint: Always import or prefix useContext with React [OK]

Common Mistakes:

• Forgetting to import useContext
• Using useContext without React prefix or import
• Assuming context value passed as prop automatically

5. You have a nested component structure where ThemeContext provides a value at the top level. You want to consume this context in a deeply nested component without passing props through intermediate components. Which approach correctly achieves this?

hard

A. Wrap the nested component tree with ThemeContext.Provider and use useContext(ThemeContext) inside the nested component

B. Pass the context value as props through every intermediate component until it reaches the nested component

C. Use useContext in the nested component without wrapping the tree in ThemeContext.Provider

D. Create a new context inside the nested component and use useContext on it

Solution

1. Step 1: Understand context provider role

   The ThemeContext.Provider must wrap the component tree to supply the context value.

2. Step 2: Consume context in nested component

   Inside the nested component, useContext(ThemeContext) reads the value without needing props passed down.

3. Final Answer:

   Wrap the nested component tree with ThemeContext.Provider and use useContext(ThemeContext) inside the nested component -> Option A

4. Quick Check:

   Provider wraps tree; useContext reads value [OK]

Hint: Wrap tree with Provider, consume with useContext inside [OK]

Common Mistakes:

• Trying to use useContext without Provider
• Passing props through all components instead of context
• Creating new context inside nested component