Effect execution timing in React - Performance & Optimization

Performance: Effect execution timing

MEDIUM IMPACT

This affects how quickly side effects run after rendering, impacting interaction responsiveness and visual updates.

Running side effects after every render regardless of dependencies

React

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

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

📈 Performance GainSingle reflow and paint, reduces blocking time by 90%

Running side effects after every render regardless of dependencies

React

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

Effect runs after every render, causing repeated network requests and blocking main thread.

📉 Performance CostTriggers multiple reflows and repaints, blocks rendering for 50-100ms per fetch

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
useEffect with empty deps	Minimal, runs once	Single reflow	Low paint cost	[OK] Good
useEffect without deps	Runs every render	Multiple reflows	High paint cost	[X] Bad
useLayoutEffect heavy work	Blocks DOM updates	Blocks reflow	Blocks paint	[X] Bad
useEffect heavy work	Runs after paint	No blocking reflow	Paint not blocked	[!] OK

Rendering Pipeline

Effect execution timing determines when side effects run relative to rendering stages, influencing layout, paint, and user interaction responsiveness.

→Commit phase

→Layout

→Paint

⚠️ BottleneckBlocking effects during commit phase delay paint and user interaction readiness.

Core Web Vital Affected

INP

This affects how quickly side effects run after rendering, impacting interaction responsiveness and visual updates.

Optimization Tips

1Use useEffect for side effects that don't block rendering.

2Always specify dependencies to avoid repeated effect executions.

3Avoid heavy computations inside useLayoutEffect to prevent blocking paint.

Performance Quiz - 3 Questions

Which hook timing is best to avoid blocking the initial paint?

A useLayoutEffect

B useEffect

C useState

D useMemo

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for long tasks during commit phase and effect execution timing.

What to look for: Check if effects run before or after paint and if they cause long blocking tasks delaying interaction readiness.