Avoiding prop drilling in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component tree using Context?

Consider the following React components using Context to avoid prop drilling. What will be rendered inside the <DisplayUser> component?

React

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

const UserContext = createContext(null);

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

function Wrapper() {
  const user = { name: 'Alice' };
  return (
    <UserContext.Provider value={user}>
      <DisplayUser />
    </UserContext.Provider>
  );
}

export default Wrapper;

A Error: Cannot read property 'name' of null

B <p>User: undefined</p>

C <p>User: </p>

D <p>User: Alice</p>

💡 Hint

Look at how useContext gets the value from UserContext.Provider.

The UserContext.Provider passes the user object down. useContext(UserContext) inside DisplayUser accesses this object, so user.name is 'Alice'.

❓ state_output

intermediate

What is the value of count after clicking the button twice in this component using Context?

Given this React component using Context to share state, what will be the value of count after clicking the button two times?

React

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

const CountContext = createContext(null);

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

function DisplayCount() {
  const { count } = useContext(CountContext);
  return <p>Count: {count}</p>;
}

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <DisplayCount />
      <IncrementButton />
    </CountContext.Provider>
  );
}

export default Counter;

A Count: 2

B Count: 1

C Count: 0

D Error: setCount is not a function

💡 Hint

Each button click increases count by 1 using setCount.

The initial count is 0. Clicking the button twice calls setCount(count + 1) twice, so count becomes 2.

🔧 Debug

advanced

Why does this component fail to update when context value changes?

Look at this React code using Context. The DisplayTheme component does not update when the theme changes. What is the cause?

React

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

const ThemeContext = createContext('light');

function DisplayTheme() {
  const theme = useContext(ThemeContext);
  return <p>Theme: {theme}</p>;
}

function ThemeSwitcher() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = useCallback(() => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  }, []);

  return (
    <ThemeContext.Provider value={theme}>
      <DisplayTheme />
      <button onClick={toggleTheme}>Toggle Theme</button>
    </ThemeContext.Provider>
  );
}

export default ThemeSwitcher;

A The <code>DisplayTheme</code> component does not consume the context properly.

B The context value is primitive and React does not detect changes in primitive values.

C The <code>toggleTheme</code> function uses stale closure over <code>theme</code> causing no update.

D The <code>ThemeContext.Provider</code> is missing a key prop to trigger re-render.

💡 Hint

Think about how toggleTheme accesses theme inside the function.

The toggleTheme function closes over the initial theme value. It does not get the updated theme on subsequent renders, so toggling does not work.

🧠 Conceptual

advanced

Which option best explains how React Context helps avoid prop drilling?

Prop drilling means passing props through many layers of components. How does React Context help avoid this?

A Context automatically updates all components in the app regardless of their position in the tree.

B Context allows components to share data directly without passing props through every intermediate component.

C Context replaces the need for state management by storing all data globally.

D Context forces all components to re-render whenever any data changes, improving consistency.

💡 Hint

Think about how data flows with and without Context.

Context provides a way to pass data through the component tree without manually passing props at every level, avoiding prop drilling.

📝 Syntax

expert

Which option correctly creates a Context with a default value and consumes it in a functional component?

Choose the code snippet that correctly creates a React Context with default value 'blue' and uses it inside a component to display the color.

A

const ColorContext = createContext('blue');
function ShowColor() {
  const color = useContext(ColorContext);
  return <p>{color}</p>;
}

B

const ColorContext = createContext();
function ShowColor() {
  const color = useContext(ColorContext, 'blue');
  return <p>{color}</p>;
}

C

const ColorContext = createContext('blue');
function ShowColor() {
  const color = ColorContext.useContext();
  return <p>{color}</p>;
}

D

const ColorContext = createContext('blue');
function ShowColor() {
  const color = useContext();
  return <p>{color}</p>;
}

💡 Hint

Remember how to create and consume context with createContext and useContext.

Option A correctly creates a context with default 'blue' and uses useContext(ColorContext) to consume it.

Option A incorrectly passes a second argument to useContext which is invalid.

Option A wrongly calls useContext as a method on the context object.

Option A calls useContext without arguments, causing an error.