What is useEffect in React - Performance Impact

Performance: What is useEffect

MEDIUM IMPACT

useEffect affects how and when side effects run, impacting interaction responsiveness and rendering timing.

Running side effects after rendering in React components

React

useEffect(() => {
  fetch('/api/data').then(res => res.json()).then(data => setData(data));
}, []);

Effect runs only once after initial render, reducing unnecessary work and improving responsiveness.

📈 Performance Gainsingle effect execution, reduces CPU and network overhead

Running side effects after rendering in React components

React

useEffect(() => {
  fetch('/api/data').then(res => res.json()).then(data => setData(data));
});

Effect runs after every render causing repeated network requests and blocking interaction responsiveness.

📉 Performance Costtriggers multiple effect executions and potential layout thrashing

Performance Comparison

Pattern	Effect Execution Frequency	Re-renders Triggered	Layout Thrashing	Verdict
Effect without dependency array	Runs every render	Many re-renders	High	[X] Bad
Effect with empty dependency array	Runs once	Minimal re-renders	Low	[OK] Good

Rendering Pipeline

useEffect runs after the browser paints the UI. It schedules side effects that can cause state updates, triggering re-renders and potentially layout recalculations.

→Commit

→Layout

→Paint

⚠️ BottleneckRe-render and layout recalculation caused by state changes inside effects

Core Web Vital Affected

INP

useEffect affects how and when side effects run, impacting interaction responsiveness and rendering timing.

Optimization Tips

1Always specify dependencies in useEffect to avoid repeated executions.

2Avoid heavy synchronous work inside useEffect to keep interactions smooth.

3Use empty dependency array to run effects only once when appropriate.

Performance Quiz - 3 Questions

What happens if you omit the dependency array in useEffect?

A The effect runs only once after the first render.

B The effect runs after every render, causing potential performance issues.

C The effect never runs.

D The effect runs before the component renders.

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for repeated effect executions and long scripting tasks.

What to look for: Multiple repeated effect calls causing scripting delays and layout recalculations indicate poor useEffect usage.

Practice

1. What is the primary purpose of useEffect in React?

easy

A. To declare state variables inside a component

B. To create new components dynamically

C. To run code after the component renders or when data changes

D. To style components with CSS

Solution

1. Step 1: Understand what useEffect does

   useEffect runs code after the component renders or when specified data changes.

2. Step 2: Compare with other React features

   State variables declare data, styling is CSS, and creating components is unrelated to useEffect.

3. Final Answer:

   To run code after the component renders or when data changes -> Option C

4. Quick Check:

   useEffect runs code after render or data change [OK]

Hint: useEffect runs after render or data updates [OK]

Common Mistakes:

• Confusing useEffect with useState
• Thinking useEffect styles components
• Believing useEffect creates components

2. Which of the following is the correct syntax to use useEffect that runs only once after the first render?

easy

A. useEffect(() => { console.log('Hello'); });

B. useEffect(() => { console.log('Hello'); }, []);

C. useEffect(() => { console.log('Hello'); }, true);

D. useEffect(() => { console.log('Hello'); }, null);

Solution

1. Step 1: Identify how to run useEffect once

   Passing an empty array [] as dependency makes useEffect run only once after the first render.

2. Step 2: Check other options

   Without dependencies (useEffect(() => { console.log('Hello'); });), it runs after every render. Options B and C pass non-array values, causing the effect to run after every render (with a React warning).

3. Final Answer:

   useEffect(() => { console.log('Hello'); }, []); -> Option B

4. Quick Check:

   Empty dependency array means run once [OK]

Hint: Empty array runs useEffect once after first render [OK]

Common Mistakes:

• Omitting dependency array causes repeated runs
• Passing non-array values thinking it runs once
• Confusing [] with null or true

3. What will be logged to the console when this component runs?

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('Count is:', count);
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>Increment</button>
  );
}

medium

A. Logs 'Count is: 0' and then logs updated count each time button clicked

B. Logs 'Count is: 0' once after first render only

C. Logs nothing because useEffect has no dependencies

D. Causes an infinite loop of logs

Solution

1. Step 1: Understand useEffect with [count] dependency

   The effect runs after first render and every time count changes, logging the current count.

2. Step 2: Analyze button click behavior

   Clicking the button increases count, triggering useEffect to log the new value.

3. Final Answer:

   Logs 'Count is: 0' and then logs updated count each time button clicked -> Option A

4. Quick Check:

   useEffect runs on count change, logging each update [OK]

Hint: useEffect runs after render and on dependency change [OK]

Common Mistakes:

• Thinking useEffect runs only once without empty array
• Believing no logs happen without empty array
• Assuming infinite loops without setCount inside useEffect

4. Identify the problem in this code snippet using useEffect:

useEffect(() => {
  fetchData();
}, fetchData);

Assume fetchData is a function defined outside.

medium

A. No problem, this code is correct

B. fetchData cannot be called inside useEffect

C. useEffect must not have any dependencies

D. Dependency array should be an array, not a function

Solution

1. Step 1: Check dependency argument type

   The second argument to useEffect must be an array listing dependencies, not a function.

2. Step 2: Identify correct syntax

   It should be [fetchData] if fetchData is a dependency, not just fetchData alone.

3. Final Answer:

   Dependency array should be an array, not a function -> Option D

4. Quick Check:

   useEffect dependencies must be an array [OK]

Hint: Dependency argument must be an array, not a function [OK]

Common Mistakes:

• Passing a function instead of an array as dependencies
• Ignoring dependency array causing repeated runs
• Thinking useEffect cannot call functions

5. You want to fetch user data only once when a component mounts and clean up a subscription when it unmounts. Which useEffect pattern is correct?

useEffect(() => {
  const subscription = subscribeToUserData();
  fetchUserData();
  return () => {
    subscription.unsubscribe();
  };
}, []);

hard

A. This pattern correctly fetches once and cleans up on unmount

B. Missing dependency array causes multiple fetches

C. Cleanup function should not be returned inside useEffect

D. Subscription should be created inside cleanup function

Solution

1. Step 1: Check dependency array usage

   Empty array [] ensures effect runs once on mount and cleanup on unmount.

2. Step 2: Verify cleanup function correctness

   Returning a function that unsubscribes cleans up resources properly when component unmounts.

3. Final Answer:

   This pattern correctly fetches once and cleans up on unmount -> Option A

4. Quick Check:

   Empty array + cleanup function = run once + cleanup [OK]

Hint: Empty array runs once; return cleanup function for unmount [OK]

Common Mistakes:

• Omitting cleanup function causing memory leaks
• Not using empty array causing repeated fetches
• Placing subscription inside cleanup function incorrectly