React context in client components in NextJS - Performance & Optimization

Performance: React context in client components

MEDIUM IMPACT

This affects interaction responsiveness and rendering speed by controlling how often components re-render when context changes.

Sharing global state with React context in client components

NextJS

const UserContext = React.createContext(null);
const ThemeContext = React.createContext(null);

function App() {
  const [user, setUser] = React.useState({ name: 'Alice' });
  const [theme, setTheme] = React.useState('light');

  return (
    <UserContext.Provider value={user}>
      <ThemeContext.Provider value={theme}>
        <UserProfile />
        <ThemeSwitcher />
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
}

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

function ThemeSwitcher() {
  const theme = React.useContext(ThemeContext);
  return <button>{theme}</button>;
}

Splitting context reduces unnecessary re-renders by isolating updates to only components that consume the changed context.

📈 Performance GainReduces re-renders by up to 50% in this example, improving INP and CPU efficiency.

Sharing global state with React context in client components

NextJS

const MyContext = React.createContext({ user: {}, theme: 'light' });

function App() {
  const [user, setUser] = React.useState({ name: 'Alice' });
  const [theme, setTheme] = React.useState('light');

  return (
    <MyContext.Provider value={{ user, theme }}>
      <UserProfile />
      <ThemeSwitcher />
    </MyContext.Provider>
  );
}

function UserProfile() {
  const { user } = React.useContext(MyContext);
  return <div>{user.name}</div>;
}

function ThemeSwitcher() {
  const { theme } = React.useContext(MyContext);
  return <button>{theme}</button>;
}

Updating either user or theme causes all consumers to re-render, even if they only use one part of the context.

📉 Performance CostTriggers re-render of all consuming components on any context value change, increasing INP and CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Single large context for multiple states	Many components re-render unnecessarily	Multiple reflows triggered	Higher paint cost due to frequent updates	[X] Bad
Multiple small contexts for separate states	Only relevant components re-render	Fewer reflows triggered	Lower paint cost with targeted updates	[OK] Good

Rendering Pipeline

When context value changes, React schedules re-render for all components consuming that context. This triggers React's reconciliation and commit phases, causing DOM updates if output changes.

→Reconciliation

→Commit

→Paint

⚠️ BottleneckReconciliation stage is most expensive due to re-rendering all consumers on any context change.

Core Web Vital Affected

INP

This affects interaction responsiveness and rendering speed by controlling how often components re-render when context changes.

Optimization Tips

1Split React context into smaller, focused contexts to limit re-renders.

2Memoize context values to avoid triggering updates when values are unchanged.

3Use React DevTools Profiler to detect unnecessary re-renders caused by context.

Performance Quiz - 3 Questions

What is a common performance issue when using a single React context for multiple unrelated states?

A Only components using changed values re-render

B Context values are cached automatically

C All consuming components re-render on any context change

D Context updates do not trigger re-renders

DevTools: React DevTools Profiler

How to check: Record a profiling session while interacting with context updates. Look for components that re-render on unrelated context changes.

What to look for: High number of re-renders in components that do not use the changed context value indicates poor context splitting.

Practice

1. What is the main purpose of React context in client components?

easy

A. To share data easily without passing props through every component

B. To create new HTML elements dynamically

C. To style components with CSS

D. To handle browser events like clicks and scrolls

Solution

1. Step 1: Understand React context role

   React context allows sharing data across components without manually passing props at every level.

2. Step 2: Compare with other options

   Creating HTML elements, styling, and event handling are unrelated to React context's main purpose.

3. Final Answer:

   To share data easily without passing props through every component -> Option A

4. Quick Check:

   React context = data sharing without prop drilling [OK]

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

Common Mistakes:

• Confusing context with styling or event handling
• Thinking context creates HTML elements
• Believing context is for CSS only

2. Which of the following is the correct way to access React context in a client component?

easy

A. const value = useRef(MyContext);

B. const value = useState(MyContext);

C. const value = useContext(MyContext);

D. const value = useEffect(MyContext);

Solution

1. Step 1: Identify the hook for context access

   React provides the useContext hook to access context values inside client components.

2. Step 2: Eliminate other hooks

   useState manages state, useEffect handles side effects, and useRef manages references, none access context.

3. Final Answer:

   const value = useContext(MyContext); -> Option C

4. Quick Check:

   useContext hook = context access [OK]

Hint: Use useContext to read context in components [OK]

Common Mistakes:

• Using useState or useEffect instead of useContext
• Trying to access context without a hook
• Confusing useRef with context access

3. Given this code snippet in a Next.js client component:

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

export default function DisplayTheme() {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

What will be displayed if DisplayTheme is rendered without a ThemeContext.Provider?

medium

A. Current theme: undefined

B. Current theme: light

C. Current theme: null

D. Error: Context provider missing

Solution

1. Step 1: Check default context value

   The context is created with default value 'light', so if no Provider wraps the component, this default is used.

2. Step 2: Understand useContext behavior without Provider

   useContext returns the default value when no Provider is found above in the tree.

3. Final Answer:

   Current theme: light -> Option B

4. Quick Check:

   Default context value used without Provider [OK]

Hint: Default context value shows if no Provider wraps component [OK]

Common Mistakes:

• Expecting undefined or null instead of default value
• Thinking it throws an error without Provider
• Confusing default value with null

4. Identify the error in this Next.js client component using React context:

import { createContext, useContext } from 'react';

const UserContext = createContext();

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

medium

A. UserContext is not wrapped with a Provider, so user is undefined causing error

B. useContext hook is used incorrectly; should pass a string

C. Missing import of React from 'react'

D. Cannot use context inside client components

Solution

1. Step 1: Check context default value and Provider usage

   UserContext is created without a default value and no Provider is shown wrapping UserName, so useContext returns undefined.

2. Step 2: Understand error cause

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

3. Final Answer:

   UserContext is not wrapped with a Provider, so user is undefined causing error -> Option A

4. Quick Check:

   Undefined context value causes error accessing properties [OK]

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

Common Mistakes:

• Assuming useContext needs a string argument
• Forgetting to wrap with Provider
• Thinking React import is mandatory in Next.js 13+ client components

5. You want to create a theme toggle in a Next.js client component using React context. Which approach correctly updates the theme value across components?

hard

A. Pass theme as a prop to every component without using context

B. Create ThemeContext with a fixed string; update theme by changing the string directly in components

C. Use useState inside each component separately without context to manage theme

D. Create a ThemeContext with state and provide toggle function via Provider; use useContext to read and update theme

Solution

1. Step 1: Understand state sharing with context

   To update theme globally, context must provide state and a function to toggle it, so all components share and update the same state.

2. Step 2: Evaluate other options

   Fixed string cannot update dynamically; separate useState per component does not share state; passing props everywhere defeats context purpose.

3. Final Answer:

   Create a ThemeContext with state and provide toggle function via Provider; use useContext to read and update theme -> Option D

4. Quick Check:

   Context with state and updater shares dynamic data [OK]

Hint: Use context Provider with state and updater for shared dynamic data [OK]

Common Mistakes:

• Trying to update fixed context value directly
• Using separate state in each component without sharing
• Passing props everywhere instead of using context