Context best practices in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React component using Context?

Consider this React code using Context. What will be rendered inside the <Display> component?

React

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

const MyContext = createContext('default');

function Display() {
  const value = useContext(MyContext);
  return <p>{value}</p>;
}

function App() {
  return (
    <MyContext.Provider value="Hello, world!">
      <Display />
    </MyContext.Provider>
  );
}

export default App;

A <p>undefined</p>

B Error: useContext must be inside a Provider

C <p>default</p>

D <p>Hello, world!</p>

💡 Hint

Think about what value the Context Provider passes down.

The <Display> component uses useContext to get the value from MyContext. Since App wraps Display with MyContext.Provider and sets the value to "Hello, world!", that is what Display renders.

❓ state_output

intermediate

What is the final value of count after these context updates?

Given this React context and component, what is the final value of count displayed?

React

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

const CountContext = createContext();

function Counter() {
  const { count, setCount } = useContext(CountContext);
  setCount(count + 1);
  return <p>{count}</p>;
}

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

export default App;

A 0

B 1

C Infinite loop error

D Undefined

💡 Hint

Consider what happens when setCount is called inside the component body.

Calling setCount directly inside the component body causes the component to re-render infinitely, because each render triggers setCount again. This leads to an infinite loop error.

📝 Syntax

advanced

Which option correctly creates a Context with a default value and uses it?

Which code snippet correctly creates a React Context with a default value and consumes it inside a component?

A

const ThemeContext = createContext('light');
function Theme() {
  const theme = useContext(ThemeContext);
  return <div>{theme}</div>;
}

B

const ThemeContext = createContext('dark');
function Theme() {
  const theme = useContext(ThemeContext, 'light');
  return <div>{theme}</div>;
}

C

const ThemeContext = createContext();
function Theme() {
  const theme = useContext();
  return <div>{theme}</div>;
}

D

const ThemeContext = createContext('dark');
function Theme() {
  const theme = ThemeContext.useContext();
  return <div>{theme}</div>;
}

💡 Hint

Remember how useContext is called with the Context object.

Option A correctly creates a Context with default value 'light' and uses useContext(ThemeContext) to consume it. Other options misuse useContext or call it incorrectly.

🔧 Debug

advanced

Why does this Context consumer component not update when Provider value changes?

Look at this React code. The Display component does not update when the Provider's value changes. Why?

React

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

const NumberContext = createContext(0);

function Display() {
  const value = useContext(NumberContext);
  return <p>{value}</p>;
}

function App() {
  const [num, setNum] = useState(0);

  function update() {
    setNum(num + 1);
  }

  return (
    <NumberContext.Provider value={num}>
      <Display />
      <button onClick={update}>Increase</button>
    </NumberContext.Provider>
  );
}

export default App;

A The state variable 'num' is mutated directly instead of using setNum, so React does not re-render.

B The Context Provider is missing a value prop.

C The useContext hook is used outside of a Provider.

D The Display component does not consume the context value.

💡 Hint

How should React state be updated to trigger re-render?

In React, state variables must be updated using their setter functions (like setNum). Directly changing num does not trigger a re-render, so the context value stays the same from React's perspective.

🧠 Conceptual

expert

Which is the best practice for optimizing Context usage in React?

Which option describes the best practice to avoid unnecessary re-renders when using React Context?

A Use multiple Providers with the same context to isolate state updates.

B Wrap only the components that need the context with the Provider and memoize context value objects to prevent re-renders.

C Avoid using React Context and pass props down manually to prevent re-renders.

D Wrap the entire app with a single Provider and always pass new objects as context value to ensure fresh data.

💡 Hint

Think about how React decides to re-render components consuming context.

Option B is best practice because limiting Provider scope and memoizing context values reduce unnecessary re-renders. Passing new objects every time (option B) causes all consumers to re-render. Option B is impractical for large apps. Option B is incorrect usage of Context.