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.