Why context is needed in React - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use React Context instead of props?

Imagine you have a React app with many nested components. You want to share a theme color across all of them.

Why is React Context helpful here compared to passing props?

A Context lets you avoid passing props through every intermediate component, making code cleaner and easier to maintain.

B Context automatically updates the browser URL to reflect the theme color.

C Context forces all components to re-render even if they don't use the shared data.

D Context replaces the need for useState in components.

💡 Hint

Think about how props must be passed down through each level even if intermediate components don't need the data.

React Context allows sharing data like theme or user info without passing props through every component. This avoids 'prop drilling' and keeps components simpler.

❓ component_behavior

intermediate

What happens when a Context value changes?

Given a React Context Provider wrapping components, what happens when the Provider's value changes?

React

const ThemeContext = React.createContext('light');

function App() {
  const [theme, setTheme] = React.useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = React.useContext(ThemeContext);
  return <button>{theme}</button>;
}

A The Context value changes but components must manually update to see it.

B Only the Provider component re-renders, children stay the same.

C All components using the Context value re-render with the new value.

D No components re-render unless useState is called inside them.

💡 Hint

Think about how React updates components that consume context when the Provider's value changes.

When a Context Provider's value changes, React re-renders all components that use that context to reflect the new value.

📝 Syntax

advanced

Identify the correct way to consume React Context

Which option correctly uses React Context inside a functional component?

React

const UserContext = React.createContext(null);

function Profile() {
  // Fill in the blank
}

A const user = React.useContext(UserContext); return <div>{user.name}</div>;

B const user = useContext(UserContext); return <div>{user.name}</div>;

C const user = React.Context(UserContext); return <div>{user.name}</div>;

D const user = React.getContext(UserContext); return <div>{user.name}</div>;

💡 Hint

Remember the exact React hook name and how to call it.

The correct hook to consume context is React.useContext. It must be called with the context object.

🔧 Debug

advanced

Why does this Context consumer not update on Provider change?

Consider this code:

const CountContext = React.createContext(0);

const Counter = React.memo(function() {
  const count = React.useContext(CountContext);
  return <div>Count: {count}</div>;
});

function App() {
  const [count, setCount] = React.useState(0);
  return (
    <CountContext.Provider value={count}>
      <Counter />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </CountContext.Provider>
  );
}

But when clicking the button, the Counter does not update. Why?

A The initial context value is 0, so React ignores updates to the Provider.

B The Provider's value is not changing because setCount is not called correctly.

C useContext hook is used incorrectly inside Counter.

D The Counter component is wrapped in React.memo without props, so it doesn't re-render on context change.

💡 Hint

Think about how React.memo affects re-rendering when context changes.

If a component consuming context is wrapped in React.memo without considering context, it may not re-render when context changes. React.memo only shallowly compares props, not context.

❓ lifecycle

expert

When does a React Context Provider update trigger re-render?

In React, under which condition does a Context Provider cause its consumers to re-render?

A Only when the Provider component unmounts and remounts.

B When the Provider's <code>value</code> prop changes by reference equality (===) compared to previous render.

C When any state inside the Provider component changes, regardless of <code>value</code> prop.

D When the Provider's <code>value</code> prop changes in deep equality but not reference equality.

💡 Hint

React compares the value prop by reference to decide if consumers update.

React Context triggers consumer re-render only if the Provider's value prop changes by reference (strict equality). Deep equality is not checked.

Practice

1. Why do React developers use Context instead of passing props through many components?

easy

A. To replace state management completely

B. To avoid prop drilling and share data easily across components

C. To make components load faster

D. To write less CSS code

Solution

1. Step 1: Understand prop drilling problem

   Passing props through many layers is tedious and error-prone, called prop drilling.

2. Step 2: Role of Context in React

   Context allows sharing data directly without passing props at every level.

3. Final Answer:

   To avoid prop drilling and share data easily across components -> Option B

4. Quick Check:

   Context avoids prop drilling = C [OK]

Hint: Context avoids passing props through many layers [OK]

Common Mistakes:

• Thinking Context makes components faster
• Believing Context replaces all state
• Confusing Context with styling

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

easy

A. const MyContext = React.Context.create();

B. const MyContext = React.useContext();

C. const MyContext = new Context();

D. const MyContext = React.createContext();

Solution

1. Step 1: Identify the correct React API for context creation

   React provides React.createContext() to create a context object.

2. Step 2: Check other options for syntax errors

   React.useContext() is a hook to consume context, not create it. Others are invalid syntax.

3. Final Answer:

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

4. Quick Check:

   Create context with React.createContext() = A [OK]

Hint: Use React.createContext() to create context [OK]

Common Mistakes:

• Using useContext to create context
• Trying to instantiate Context with new
• Incorrect method names like Context.create

3. Given this React code snippet, what will be the output shown by DisplayUser component?

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

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

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

medium

A. Hello, undefined!

B. Hello, Guest!

C. Hello, Alice!

D. Error: Context not found

Solution

1. Step 1: Understand default and provided context values

   The default value is 'Guest', but the provider sets value to 'Alice'.

2. Step 2: Context consumption in DisplayUser

   DisplayUser uses useContext to get the current context value, which is 'Alice' from the provider.

3. Final Answer:

   Hello, Alice! -> Option C

4. Quick Check:

   Provider value overrides default = A [OK]

Hint: Provider value overrides default context value [OK]

Common Mistakes:

• Assuming default value always shows
• Expecting undefined without provider
• Thinking useContext throws error if no provider

4. What is wrong with this React code using Context?

const ThemeContext = React.createContext('light');

function Button() {
  const theme = React.useContext();
  return <button className={theme}>Click me</button>;
}

medium

A. useContext is called without context argument

B. Context must be created inside the component

C. Default value 'light' is invalid

D. Button component must be a class component

Solution

1. Step 1: Check useContext usage

   useContext requires the context object as an argument, e.g., useContext(ThemeContext).

2. Step 2: Verify other statements

   Context creation outside component is correct. Default value 'light' is valid. Functional components can use hooks.

3. Final Answer:

   useContext is called without context argument -> Option A

4. Quick Check:

   useContext needs context argument = B [OK]

Hint: Always pass context object to useContext() [OK]

Common Mistakes:

• Calling useContext() with no arguments
• Creating context inside component repeatedly
• Thinking default value must be an object
• Believing hooks require class components

5. You want to share a user's login status and theme preference across many nested components without passing props at every level. Which approach best solves this problem?

hard

A. Use React Context to provide user and theme data globally

B. Pass user and theme as props through every component manually

C. Store user and theme in local component state only

D. Use CSS variables to store user and theme data

Solution

1. Step 1: Identify the problem with prop drilling

   Passing props manually through many nested components is tedious and error-prone.

2. Step 2: Use Context for global data sharing

   React Context allows sharing data like user login and theme globally without prop drilling.

3. Step 3: Evaluate other options

   Local state is limited to one component. CSS variables cannot store user login info. Passing props manually is inefficient.

4. Final Answer:

   Use React Context to provide user and theme data globally -> Option A

5. Quick Check:

   Context shares global data easily = D [OK]

Hint: Use Context for global shared data like user and theme [OK]

Common Mistakes:

• Passing props through every component manually
• Trying to store user info in CSS
• Using local state for global data