Common lifecycle use cases in React - Performance & Optimization

Performance: Common lifecycle use cases

MEDIUM IMPACT

This affects how quickly components render and update, impacting interaction responsiveness and visual stability.

Fetching data on component load

React

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

Runs fetchData only once after initial render, avoiding repeated network calls.

📈 Performance Gainsingle network request, single reflow

Fetching data on component load

React

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

Triggers fetchData on every render causing repeated network requests and re-renders.

📉 Performance Costblocks rendering for multiple network calls, triggers multiple reflows

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Effect without dependencies	Multiple redundant updates	Multiple reflows	High paint cost	[X] Bad
Effect with empty dependency array	Single update	Single reflow	Low paint cost	[OK] Good
Effect with missing cleanup	Memory leaks increase DOM nodes	Potential reflows on event triggers	Medium paint cost	[!] Bad
Effect with proper cleanup	Stable DOM nodes	Minimal reflows	Low paint cost	[OK] Good

Rendering Pipeline

React lifecycle hooks trigger state changes that cause React to schedule updates. These updates lead to recalculations of virtual DOM, diffing, and finally browser DOM updates, affecting layout and paint.

→JavaScript Execution

→Virtual DOM Diffing

→Layout

→Paint

⚠️ BottleneckExcessive or unnecessary state updates causing repeated layout and paint cycles

Core Web Vital Affected

INP

This affects how quickly components render and update, impacting interaction responsiveness and visual stability.

Optimization Tips

1Always specify dependency arrays in useEffect to control when effects run.

2Clean up side effects like event listeners to avoid memory leaks.

3Avoid state updates inside effects without dependencies to prevent infinite loops.

Performance Quiz - 3 Questions

What is the performance impact of omitting the dependency array in useEffect when fetching data?

A Prevents the effect from running at all

B Causes repeated network requests and multiple re-renders

C Runs fetch only once, improving performance

D Improves memory usage by caching data

DevTools: Performance

How to check: Record a session while interacting with the component, then inspect the flame chart for repeated renders and long scripting tasks.

What to look for: Look for repeated React render phases and long JavaScript execution blocks indicating inefficient lifecycle usage.

Practice

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

easy

A. To define event handlers

B. To declare state variables

C. To run code after the component renders or updates

D. To style components dynamically

Solution

1. Step 1: Understand the role of useEffect

   The useEffect hook runs side effects like data fetching or timers after rendering.

2. Step 2: Compare with other options

   Declaring state is done with useState, event handlers are functions, and styling is separate.

3. Final Answer:

   To run code after the component renders or updates -> Option C

4. Quick Check:

   useEffect runs side effects after render [OK]

Hint: useEffect runs code after render or update [OK]

Common Mistakes:

• Confusing useEffect with useState
• Thinking useEffect is for styling
• Believing useEffect defines event handlers

2. Which of the following is the correct syntax to run an effect only once when a React component mounts?

easy

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

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

C. useEffect(() => { console.log('Mounted'); }, [() => {}]);

D. useEffect(() => { console.log('Mounted'); }, [{}]);

Solution

1. Step 1: Understand dependency array in useEffect

   An empty array [] means the effect runs once on mount only.

2. Step 2: Analyze other options

   Omitting dependencies runs effect after every render; arrays with unstable values like functions or objects run on every render since they are recreated.

3. Final Answer:

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

4. Quick Check:

   Empty array runs effect once on mount [OK]

Hint: Empty dependency array means run once on mount [OK]

Common Mistakes:

• Omitting dependency array causes repeated runs
• Using non-empty arrays runs effect multiple times
• Putting recreated functions or objects in dependency array causes re-runs

3. Consider this React component:

function Timer() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return <div>Count: {count}</div>;
}

What will be displayed after 3 seconds?

medium

A. Count: 0

B. Count: 1

C. Count: 1000

D. Count: 3

Solution

1. Step 1: Understand the interval effect

   The effect sets an interval that increments count every 1000ms (1 second).

2. Step 2: Calculate count after 3 seconds

   After 3 intervals, count increments from 0 to 3.

3. Final Answer:

   Count: 3 -> Option D

4. Quick Check:

   Interval increments count every second [OK]

Hint: Interval increments count every second [OK]

Common Mistakes:

• Ignoring cleanup function
• Thinking count stays 0
• Confusing milliseconds with count value

4. What is wrong with this React useEffect usage?

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('Hello');
  }, 1000);
});

medium

A. Missing dependency array causes multiple timeouts to be set on every render

B. setTimeout is not allowed inside useEffect

C. console.log cannot be used inside useEffect

D. The timeout duration must be less than 500ms

Solution

1. Step 1: Check dependency array presence

   Without a dependency array, the effect runs after every render, creating a new timeout each time.

2. Step 2: Understand consequences

   This causes multiple timers to accumulate (no cleanup returned), leading to multiple console.logs firing.

3. Final Answer:

   Missing dependency array causes multiple timeouts to be set on every render -> Option A

4. Quick Check:

   Missing dependencies cause repeated effect runs [OK]

Hint: Always add dependency array to avoid repeated effects [OK]

Common Mistakes:

• Thinking setTimeout is disallowed in useEffect
• Believing console.log can't be used
• Assuming timeout duration limits

5. You want to fetch user data only when the userId prop changes in a React component. Which useEffect hook is correct?

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, ???);

  return <div>{user ? user.name : 'Loading...'}</div>;
}

hard

A. [userId]

B. [user]

C. []

D. [fetch]

Solution

1. Step 1: Identify when to run the effect

   The effect should run only when userId changes to fetch new data.

2. Step 2: Choose correct dependency array

   Including userId in the dependency array triggers effect on its change.

3. Final Answer:

   [userId] -> Option A

4. Quick Check:

   Dependency array controls when effect runs [OK]

Hint: Put changing props in dependency array [OK]

Common Mistakes:

• Using empty array runs effect only once
• Using state variable instead of prop
• Including functions like fetch in dependencies