Creating context in React - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React context example?

Consider this React code using context:

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

const MyContext = createContext('default');

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

export default function App() {
  return (
    <MyContext.Provider value="hello">
      <Display />
    </MyContext.Provider>
  );
}

What will be rendered inside the <div>?

React

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

const MyContext = createContext('default');

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

export default function App() {
  return (
    <MyContext.Provider value="hello">
      <Display />
    </MyContext.Provider>
  );
}

A Value: default

B Value: null

C Value: hello

D Value: undefined

💡 Hint

Check what value is passed to the Provider and what useContext reads.

The MyContext.Provider sets the context value to "hello". The useContext(MyContext) hook reads this value, so the output is "Value: hello".

❓ state_output

intermediate

What is the value of count after clicking the button twice?

Given this React component using context and state:

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

const CountContext = createContext();

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

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

After clicking the button two times, what is the value of count shown?

React

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

const CountContext = createContext();

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

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

A Count: 2

B Count: 1

C Count: 0

D Count: NaN

💡 Hint

Each click increments count by 1 starting from 0.

The initial count is 0. Each button click calls setCount(count + 1), increasing count by 1. After two clicks, count is 2.

📝 Syntax

advanced

Which option correctly creates a React context with a default value?

Choose the correct code to create a React context with default value "guest".

A const UserContext = createContext({ default: 'guest' });

B const UserContext = createContext('guest');

C const UserContext = createContext(); UserContext.defaultValue = 'guest';

D const UserContext = createContext; UserContext('guest');

💡 Hint

Look for the correct way to call createContext with a default value.

The createContext function takes the default value as an argument. Option B correctly calls createContext('guest').

🔧 Debug

advanced

Why does this React context example cause an error?

Examine this code snippet:

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

const ThemeContext = createContext();

function DisplayTheme() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme.color}</div>;
}

export default function App() {
  return <DisplayTheme />;
}

What error will occur when this runs?

React

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

const ThemeContext = createContext();

function DisplayTheme() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme.color}</div>;
}

export default function App() {
  return <DisplayTheme />;
}

A No error, renders 'Theme: undefined'

B SyntaxError: Unexpected token

C ReferenceError: ThemeContext is not defined

D TypeError: Cannot read property 'color' of undefined

💡 Hint

Check what value useContext returns when no Provider is used.

Since ThemeContext has no default value and no Provider wraps DisplayTheme, useContext(ThemeContext) returns undefined. Accessing theme.color causes a TypeError.

🧠 Conceptual

expert

Which option best explains React context behavior when Provider value changes?

In React, when a context Provider's value prop changes, what happens to components consuming that context?

A Consuming components re-render only if the new context value is a different reference than before.

B Only consuming components that use <code>useMemo</code> re-render with the new value.

C All consuming components re-render immediately with the new context value.

D Consuming components never re-render automatically; you must force update manually.

💡 Hint

Think about how React compares context values to decide re-rendering.

React re-renders consuming components only when the context value changes by reference (shallow comparison). If the value is the same object, no re-render occurs.