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.

Practice

1. What is the main purpose of React Context?

easy

A. To handle routing between pages

B. To style components globally

C. To manage component local state only

D. To share data between components without passing props manually

Solution

1. Step 1: Understand React Context role

   React Context allows sharing data across many components without passing props at every level.

2. Step 2: Compare with other options

   Styling, local state, and routing are handled by other React features or libraries, not Context.

3. Final Answer:

   To share data between components without passing props manually -> Option D

4. Quick Check:

   Context shares data without prop drilling [OK]

Hint: Context shares data without passing props repeatedly [OK]

Common Mistakes:

• Confusing Context with styling or routing
• Thinking Context manages only local state
• Assuming Context replaces all state management

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

easy

A. const MyContext = new Context();

B. const MyContext = createContext();

C. const MyContext = React.createContext();

D. const MyContext = React.useContext();

Solution

1. Step 1: Recall Context creation syntax

   React Context is created using React.createContext() function.

2. Step 2: Check other options

   A uses invalid constructor, B misses React prefix, D calls a hook instead of creating context.

3. Final Answer:

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

4. Quick Check:

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

Hint: Create context with React.createContext() [OK]

Common Mistakes:

• Omitting React prefix
• Using new keyword incorrectly
• Confusing useContext hook with createContext

3. Given this code snippet, what will be logged to the console?

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

function DisplayTheme() {
  const theme = React.useContext(ThemeContext);
  console.log(theme);
  return <div>Current theme: {theme}</div>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <DisplayTheme />
    </ThemeContext.Provider>
  );
}

medium

A. "dark"

B. "light"

C. undefined

D. Error: useContext called outside Provider

Solution

1. Step 1: Identify Provider value

   The ThemeContext.Provider wraps DisplayTheme with value "dark".

2. Step 2: Understand useContext behavior

   useContext reads the nearest Provider value, so theme is "dark" inside DisplayTheme.

3. Final Answer:

   "dark" -> Option A

4. Quick Check:

   useContext reads Provider value, not default [OK]

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

Common Mistakes:

• Assuming default value is used despite Provider
• Thinking useContext returns undefined without explicit value
• Confusing useContext with useState

4. What is wrong with this React Context usage?

const UserContext = React.createContext();

function Profile() {
  const user = React.useContext(UserContext);
  return <div>User: {user.name}</div>;
}

function App() {
  return <Profile />;
}

medium

A. UserContext.Provider is missing, so user is undefined causing error

B. useContext hook is used incorrectly inside Profile

C. React.createContext() requires a default value

D. Profile component should not access context directly

Solution

1. Step 1: Check for Provider wrapping

   App renders Profile without wrapping it in UserContext.Provider, so context value is undefined.

2. Step 2: Understand consequence in Profile

   Accessing user.name when user is undefined causes runtime error.

3. Final Answer:

   UserContext.Provider is missing, so user is undefined causing error -> Option A

4. Quick Check:

   Missing Provider means context value is undefined [OK]

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

Common Mistakes:

• Thinking createContext must have default value
• Believing useContext usage is incorrect here
• Assuming components can't access context directly

5. You want to update a theme value shared via Context from a nested component. Which is the best practice to enable this?

hard

A. Use useState inside the nested component to update theme locally

B. Pass a setter function in the Context value and call it inside the nested component

C. Create a new Context inside the nested component to override theme

D. Modify the Context object directly without Provider

Solution

1. Step 1: Understand Context update pattern

   To update shared data, pass a setter function (like from useState) in Context value.

2. Step 2: Evaluate other options

   Using local useState won't update shared theme; creating new Context breaks sharing; modifying Context object directly is invalid.

3. Final Answer:

   Pass a setter function in the Context value and call it inside the nested component -> Option B

4. Quick Check:

   Pass setter in Context to update shared state [OK]

Hint: Pass setter function via Context to update shared state [OK]

Common Mistakes:

• Trying to update Context value directly
• Using local state instead of shared state
• Creating multiple Contexts unnecessarily