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.

Practice

1. What is the main problem that prop drilling causes in React applications?

easy

A. Not using hooks properly in functional components

B. Using too many state variables in a single component

C. Rendering components multiple times unnecessarily

D. Passing props through many layers even if intermediate components don't need them

Solution

1. Step 1: Understand what prop drilling means

   Prop drilling happens when props are passed down through many components that don't use them, just to reach a deeply nested component.

2. Step 2: Identify the main issue caused by prop drilling

   This makes the code harder to maintain and understand because many components receive props they don't need.

3. Final Answer:

   Passing props through many layers even if intermediate components don't need them -> Option D

4. Quick Check:

   Prop drilling = Passing props through many layers [OK]

Hint: Prop drilling means unnecessary passing props down layers [OK]

Common Mistakes:

• Confusing prop drilling with state management issues
• Thinking prop drilling is about rendering performance
• Believing prop drilling is caused by hooks misuse

2. Which of the following is the correct way to create a React Context to avoid prop drilling?

easy

A. const MyContext = React.useContext();

B. const MyContext = React.createContext();

C. const MyContext = React.useState();

D. const MyContext = React.useEffect();

Solution

1. Step 1: Recall the React API for creating context

   React provides createContext to create a context object for sharing data.

2. Step 2: Identify the correct syntax

   The correct syntax is const MyContext = React.createContext();. The other options are hooks used for different purposes.

3. Final Answer:

   const MyContext = React.createContext(); -> Option B

4. Quick Check:

   createContext() creates context [OK]

Hint: Use createContext() to make a context object [OK]

Common Mistakes:

• Using useContext() to create context instead of consume it
• Confusing useState() or useEffect() with context creation
• Missing parentheses after createContext

3. Given this code snippet, what will be the output inside Child component?

const MyContext = React.createContext('default');

function Parent() {
  return (
    
      
    
  );
}

function Child() {
  const value = React.useContext(MyContext);
  return <div>{value}</div>;
}

medium

A. <div>hello</div>

B. <div>default</div>

C. <div>undefined</div>

D. Error: useContext must be inside a Provider

Solution

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

   The context default is 'default', but the Parent component provides the value 'hello' via MyContext.Provider.

2. Step 2: Determine what useContext returns inside Child

   The Child component uses useContext(MyContext), so it receives the nearest provider's value, which is 'hello'.

3. Final Answer:

   <div>hello</div> -> Option A

4. Quick Check:

   useContext returns nearest Provider value [OK]

Hint: useContext gets nearest Provider value, not default [OK]

Common Mistakes:

• Assuming default value is always used
• Thinking useContext returns undefined without explicit value
• Confusing Provider value with component props

4. Identify the error in this code that tries to avoid prop drilling using React Context:

const MyContext = React.createContext();

function Parent() {
  const value = 'data';
  return <Child />;
}

function Child() {
  const value = React.useContext(MyContext);
  return <div>{value}</div>;
}

medium

A. MyContext.Provider is missing around Child component

B. useContext is used incorrectly inside Child

C. createContext must have a default value

D. Parent should pass value as a prop to Child

Solution

1. Step 1: Check if Provider wraps components needing context

   The Parent component returns <Child /> without wrapping it in MyContext.Provider.

2. Step 2: Understand useContext requires Provider to get value

   Without a Provider, useContext(MyContext) returns the default value, which is undefined here, likely not intended.

3. Final Answer:

   MyContext.Provider is missing around Child component -> Option A

4. Quick Check:

   Provider missing = context value undefined [OK]

Hint: Always wrap consumers with Provider to supply context [OK]

Common Mistakes:

• Thinking createContext must have default value
• Believing useContext works without Provider
• Confusing prop passing with context usage

5. You have a deeply nested component tree where ThemeContext provides a theme string. You want to avoid prop drilling and also allow components to update the theme. Which approach correctly combines context and state to achieve this?

hard

A. Use multiple contexts for theme and setTheme separately and pass them as props

B. Pass theme as a prop from top to bottom and use useState only in the deepest component

C. Create ThemeContext with createContext, provide {theme, setTheme} from a state in a top-level component, and consume both in nested components

D. Store theme in a global variable and read it directly in nested components

Solution

1. Step 1: Understand how to share state and updater via context

   To avoid prop drilling and allow updates, the context should provide both the current value and a function to update it.

2. Step 2: Use createContext and provide state and setter from top-level

   Create a context with createContext(), then in a top-level component use useState to hold theme and pass both theme and setTheme in the Provider's value.

3. Step 3: Consume both theme and setTheme in nested components

   Nested components use useContext to get both and can read or update the theme without prop drilling.

4. Final Answer:

   Create ThemeContext with createContext, provide {theme, setTheme} from a state in a top-level component, and consume both in nested components -> Option C

5. Quick Check:

   Context with state and setter avoids prop drilling [OK]

Hint: Provide state and setter in context value to update data [OK]

Common Mistakes:

• Passing only value without setter in context
• Using global variables instead of React state
• Passing props through many layers instead of context