Why context is needed in React - Performance Evidence

Performance: Why context is needed

MEDIUM IMPACT

This concept affects interaction responsiveness and rendering efficiency when passing data through component trees.

Passing data deeply through many nested components

React

const UserContext = React.createContext(null);
function Parent() {
  const user = { name: 'Alice' };
  return <UserContext.Provider value={user}>
    <Child1 />
  </UserContext.Provider>;
}
function Child3() {
  const user = React.useContext(UserContext);
  return <div>{user.name}</div>;
}

Context provides data directly to components that need it, avoiding unnecessary re-renders.

📈 Performance GainReduces re-renders and improves interaction responsiveness.

Passing data deeply through many nested components

React

function Parent() {
  const user = { name: 'Alice' };
  return <Child1 user={user} />;
}
function Child1({ user }) {
  return <Child2 user={user} />;
}
function Child2({ user }) {
  return <Child3 user={user} />;
}
function Child3({ user }) {
  return <div>{user.name}</div>;
}

Prop drilling causes many components to re-render even if they don't use the data directly.

📉 Performance CostTriggers multiple re-renders and increases component update time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Prop drilling through many components	Many props passed down	Multiple re-renders	Higher paint cost due to re-renders	[X] Bad
Using React Context for shared data	Minimal props passed	Re-renders only consuming components	Lower paint cost	[OK] Good

Rendering Pipeline

Context updates trigger React's render phase only for components consuming the context, reducing unnecessary layout and paint work.

→Render

→Commit

→Paint

⚠️ BottleneckExcessive re-renders caused by prop drilling

Core Web Vital Affected

INP

This concept affects interaction responsiveness and rendering efficiency when passing data through component trees.

Optimization Tips

1Avoid passing props through many layers if intermediate components don't need them.

2Use React Context to share data efficiently across component trees.

3Limit context updates to prevent unnecessary re-renders for better input responsiveness.

Performance Quiz - 3 Questions

What performance problem does prop drilling cause in React apps?

A Increased CSS paint times

B Slower initial page load due to large bundles

C Unnecessary re-renders of components that only pass props

D Blocking network requests

DevTools: React DevTools Profiler

How to check: Record a profiling session while interacting with components. Look for components re-rendering unnecessarily due to prop changes.

What to look for: Excessive re-renders in intermediate components indicate prop drilling; fewer re-renders with context show better performance.

Practice

1. Why do React developers use Context instead of passing props through many components?

easy

A. To replace state management completely

B. To avoid prop drilling and share data easily across components

C. To make components load faster

D. To write less CSS code

Solution

1. Step 1: Understand prop drilling problem

   Passing props through many layers is tedious and error-prone, called prop drilling.

2. Step 2: Role of Context in React

   Context allows sharing data directly without passing props at every level.

3. Final Answer:

   To avoid prop drilling and share data easily across components -> Option B

4. Quick Check:

   Context avoids prop drilling = C [OK]

Hint: Context avoids passing props through many layers [OK]

Common Mistakes:

• Thinking Context makes components faster
• Believing Context replaces all state
• Confusing Context with styling

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

easy

A. const MyContext = React.Context.create();

B. const MyContext = React.useContext();

C. const MyContext = new Context();

D. const MyContext = React.createContext();

Solution

1. Step 1: Identify the correct React API for context creation

   React provides React.createContext() to create a context object.

2. Step 2: Check other options for syntax errors

   React.useContext() is a hook to consume context, not create it. Others are invalid syntax.

3. Final Answer:

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

4. Quick Check:

   Create context with React.createContext() = A [OK]

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

Common Mistakes:

• Using useContext to create context
• Trying to instantiate Context with new
• Incorrect method names like Context.create

3. Given this React code snippet, what will be the output shown by DisplayUser component?

const UserContext = React.createContext('Guest');

function DisplayUser() {
  const user = React.useContext(UserContext);
  return <div>Hello, {user}!</div>;
}

function App() {
  return (
    <UserContext.Provider value="Alice">
      <DisplayUser />
    </UserContext.Provider>
  );
}

medium

A. Hello, undefined!

B. Hello, Guest!

C. Hello, Alice!

D. Error: Context not found

Solution

1. Step 1: Understand default and provided context values

   The default value is 'Guest', but the provider sets value to 'Alice'.

2. Step 2: Context consumption in DisplayUser

   DisplayUser uses useContext to get the current context value, which is 'Alice' from the provider.

3. Final Answer:

   Hello, Alice! -> Option C

4. Quick Check:

   Provider value overrides default = A [OK]

Hint: Provider value overrides default context value [OK]

Common Mistakes:

• Assuming default value always shows
• Expecting undefined without provider
• Thinking useContext throws error if no provider

4. What is wrong with this React code using Context?

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

function Button() {
  const theme = React.useContext();
  return <button className={theme}>Click me</button>;
}

medium

A. useContext is called without context argument

B. Context must be created inside the component

C. Default value 'light' is invalid

D. Button component must be a class component

Solution

1. Step 1: Check useContext usage

   useContext requires the context object as an argument, e.g., useContext(ThemeContext).

2. Step 2: Verify other statements

   Context creation outside component is correct. Default value 'light' is valid. Functional components can use hooks.

3. Final Answer:

   useContext is called without context argument -> Option A

4. Quick Check:

   useContext needs context argument = B [OK]

Hint: Always pass context object to useContext() [OK]

Common Mistakes:

• Calling useContext() with no arguments
• Creating context inside component repeatedly
• Thinking default value must be an object
• Believing hooks require class components

5. You want to share a user's login status and theme preference across many nested components without passing props at every level. Which approach best solves this problem?

hard

A. Use React Context to provide user and theme data globally

B. Pass user and theme as props through every component manually

C. Store user and theme in local component state only

D. Use CSS variables to store user and theme data

Solution

1. Step 1: Identify the problem with prop drilling

   Passing props manually through many nested components is tedious and error-prone.

2. Step 2: Use Context for global data sharing

   React Context allows sharing data like user login and theme globally without prop drilling.

3. Step 3: Evaluate other options

   Local state is limited to one component. CSS variables cannot store user login info. Passing props manually is inefficient.

4. Final Answer:

   Use React Context to provide user and theme data globally -> Option A

5. Quick Check:

   Context shares global data easily = D [OK]

Hint: Use Context for global shared data like user and theme [OK]

Common Mistakes:

• Passing props through every component manually
• Trying to store user info in CSS
• Using local state for global data