React context in client components in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this React context usage in a client component?

Consider this Next.js client component using React context. What will be rendered inside the <p> tag?

NextJS

'use client';

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

const ThemeContext = createContext('light');


function DisplayTheme() {
  const theme = useContext(ThemeContext);
  return <p>{`Current theme is: ${theme}`}</p>;
}

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

A Current theme is: dark

B Current theme is: undefined

C Error: useContext can only be used inside a Provider

D Current theme is: light

💡 Hint

Remember that the value passed to the Provider overrides the default context value.

The ThemeContext.Provider wraps DisplayTheme and provides the value "dark". So useContext(ThemeContext) returns "dark". The default value "light" is ignored because the Provider is present.

❓ lifecycle

intermediate

When does a React client component re-render when context changes?

Given a React client component consuming context, when will it re-render?

NextJS

'use client';

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

const CountContext = createContext(0);


function ShowCount() {
  const count = useContext(CountContext);
  return <p>{`Count is ${count}`}</p>;
}

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={count}>
      <ShowCount />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </CountContext.Provider>
  );
}

A ShowCount re-renders only when the button is clicked twice

B ShowCount never re-renders because context value is primitive

C ShowCount re-renders every time the count state changes

D ShowCount re-renders only on initial render

💡 Hint

Think about how React context triggers updates when the Provider's value changes.

When the count state changes, the CountContext.Provider value changes, causing all consumers like ShowCount to re-render with the new value.

🔧 Debug

advanced

Why does this React client component throw an error using context?

Examine this code snippet. Why does it throw an error when rendering?

NextJS

'use client';

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

const UserContext = createContext(null);

function UserName() {
  const user = useContext(UserContext);
  return <p>{user.name}</p>;
}

export default function Page() {
  return <UserName />;
}

A Error because UserName uses useContext without a Provider wrapping it

B Error because createContext was called with null instead of an object

C No error, renders empty paragraph

D Error because useContext must be called inside a useEffect hook

💡 Hint

Check if the component consuming context is wrapped in a Provider.

The UserName component calls useContext(UserContext) but no UserContext.Provider is wrapping it, so the context value is null. Accessing user.name causes a runtime error.

📝 Syntax

advanced

Which option correctly defines a React context and uses it in a client component?

Choose the option that correctly creates a React context and consumes it in a client component without syntax errors.

A

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

const MyContext = createContext('default');

'use client';

function Comp() {
  const val = useContext(MyContext);
  return <div>{val}</div>;
}

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

B

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

const MyContext = createContext('default')

function Comp() {
  const val = useContext(MyContext)
  return <div>{val}</div>
}

export default function Page() {
  return <MyContext.Provider value="hello"><Comp /></MyContext.Provider>
}

C

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

const MyContext = createContext('default');

function Comp() {
  const val = useContext(MyContext);
  return <div>{val}</div>;
}

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

D

'use client';

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

const MyContext = createContext('default');


function Comp() {
  const val = useContext(MyContext);
  return <div>{val}</div>;
}

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

💡 Hint

Remember to mark client components with 'use client'; directive.

Option D correctly includes the 'use client'; directive at the top of the client component file, uses semicolons, and properly wraps Comp with the Provider. Option D is missing the directive at the top of the file (it is after imports). Option D misses semicolons and the directive. Option D misses the directive entirely.

❓ state_output

expert

What is the final rendered output after clicking the button twice in this Next.js client component using context?

Analyze the code below. After clicking the "Add" button twice, what will be the rendered output inside the <div>?

NextJS

'use client';

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

const NumberContext = createContext(0);


function DisplayNumber() {
  const number = useContext(NumberContext);
  return <div>{`Number: ${number}`}</div>;
}

export default function Counter() {
  const [num, setNum] = useState(0);

  const add = useCallback(() => {
    setNum(n => n + 1);
  }, []);

  return (
    <NumberContext.Provider value={num}>
      <DisplayNumber />
      <button onClick={add}>Add</button>
    </NumberContext.Provider>
  );
}

A Number: 0

B Number: 2

C Number: 1

D Number: undefined

💡 Hint

Consider how state updates and context value changes affect re-rendering.

Each click increments num by 1. After two clicks, num is 2. The context value updates to 2, so DisplayNumber renders "Number: 2".