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.