Multiple effects in a component in React - Performance & Optimization

Performance: Multiple effects in a component

MEDIUM IMPACT

This affects the interaction responsiveness and rendering speed by controlling how many times React runs side effects and triggers updates.

Running multiple side effects in a React component

React

function MyComponent() {
  React.useEffect(() => {
    // fetch data
    // update document title
    // add event listener
  }, []);
  return <div>Content</div>;
}

Combining related effects into one reduces the number of effect executions and reflows.

📈 Performance GainSingle effect execution and 1 reflow on mount

Running multiple side effects in a React component

React

function MyComponent() {
  React.useEffect(() => {
    // fetch data
  }, []);
  React.useEffect(() => {
    // update document title
  }, []);
  React.useEffect(() => {
    // add event listener
  }, []);
  return <div>Content</div>;
}

All effects run independently and may cause multiple re-renders and layout recalculations, increasing CPU and rendering cost.

📉 Performance CostTriggers 3 effect executions and potentially 3 reflows on mount

Performance Comparison

Pattern	Effect Executions	Reflows	Paint Cost	Verdict
Multiple separate useEffect calls	3	3	High	[X] Bad
Single combined useEffect call	1	1	Low	[OK] Good

Rendering Pipeline

React runs effects after rendering. Multiple effects cause multiple effect callbacks, each potentially triggering state updates and reflows.

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckMultiple effect executions causing repeated layout recalculations

Core Web Vital Affected

INP

This affects the interaction responsiveness and rendering speed by controlling how many times React runs side effects and triggers updates.

Optimization Tips

1Limit the number of useEffect hooks by combining related logic.

2Use dependency arrays to avoid unnecessary effect runs.

3Avoid side effects that trigger layout changes multiple times on mount.

Performance Quiz - 3 Questions

What is a performance downside of having many separate useEffect hooks in a React component?

A They reduce the bundle size significantly.

B They can cause multiple reflows and slow down rendering.

C They improve initial load time by parallelizing effects.

D They prevent any re-rendering after mount.

DevTools: Performance

How to check: Record a performance profile while mounting the component and look for multiple effect callbacks and layout recalculations.

What to look for: Multiple 'useEffect' callbacks and repeated 'Layout' events indicate inefficiency.