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.