Effect execution timing in React - Deep Dive

Overview - Effect execution timing

What is it?

Effect execution timing in React describes when and how React runs side effects inside functional components. Side effects are operations like fetching data, updating the DOM, or setting timers that happen outside the normal rendering process. React uses hooks like useEffect to manage these effects and controls exactly when they run to keep the UI consistent and efficient. Understanding this timing helps you write components that behave correctly and perform well.

Why it matters

Without clear rules about when effects run, your app could behave unpredictably, causing bugs like infinite loops, stale data, or UI flickers. Effect execution timing ensures side effects happen at the right moment, after rendering but before the user sees inconsistent states. This makes your app feel smooth and reliable, improving user experience and developer confidence.

Where it fits

Before learning effect execution timing, you should understand React functional components and hooks basics, especially useState and useEffect. After mastering timing, you can explore advanced hooks patterns, performance optimization, and React's concurrent features that rely on precise effect control.

Mental Model

Core Idea

React schedules side effects to run after rendering to keep UI updates predictable and efficient.

Think of it like...

Imagine a chef preparing a meal: first, they set the table (render UI), then they cook the dishes (run effects). Cooking too early or too late would spoil the experience, just like running effects at the wrong time spoils the app's behavior.

┌───────────────┐
│ Render Phase  │
│ (Prepare UI)  │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Commit Phase  │
│ (Update DOM)  │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Effect Phase  │
│ (Run useEffect│
│  callbacks)   │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

What are React effects?

Concept: Effects are operations that happen outside rendering, like data fetching or subscriptions.

In React, effects let you perform tasks that don't directly produce UI but affect it, such as fetching data from a server or setting up event listeners. The useEffect hook is the main way to declare these effects inside functional components.

Result

You can run code that interacts with the outside world or manages resources alongside your UI.

Understanding effects is key because React separates rendering (pure UI) from side effects (impure operations), keeping UI predictable.

2

Foundation

Basic useEffect timing

Concept: useEffect runs after the component renders and the DOM updates.

When you use useEffect, React waits until it finishes rendering and updating the DOM, then runs your effect callback. This means effects never block the UI from showing and always see the latest DOM state.

Result

Effects run after the screen updates, so users see the UI before effects start.

Knowing effects run after rendering helps avoid blocking UI and ensures effects see the current UI state.

3

Intermediate

Effect dependencies control timing

🤔Before reading on: do you think effects run every render or only when dependencies change? Commit to your answer.

Concept: The dependency array tells React when to re-run an effect, controlling its timing.

You can pass an array of values to useEffect. React compares these values between renders and only runs the effect if one changes. This prevents unnecessary effect runs and improves performance.

Result

Effects run only when needed, not on every render.

Understanding dependencies lets you control effect timing precisely, avoiding wasted work and bugs from stale data.

4

Intermediate

Cleanup functions run before next effect

🤔Before reading on: do you think cleanup runs before or after the next effect? Commit to your answer.

Concept: Effects can return a cleanup function that React runs before running the effect again or when the component unmounts.

If your effect sets up something like a subscription or timer, you return a cleanup function to remove it. React calls this cleanup before running the effect again or when the component leaves the screen, preventing resource leaks.

Result

Resources are cleaned up timely, avoiding bugs like duplicated subscriptions.

Knowing cleanup timing prevents common bugs and memory leaks in React apps.

5

Intermediate

useLayoutEffect runs earlier than useEffect

🤔Before reading on: do you think useLayoutEffect runs before or after painting the screen? Commit to your answer.

Concept: useLayoutEffect runs synchronously after DOM mutations but before the browser paints the screen.

Unlike useEffect, useLayoutEffect runs immediately after React updates the DOM but before the browser shows it. This lets you read layout or make changes that avoid flicker or visual glitches.

Result

You can fix layout or style issues before the user sees the UI.

Understanding this timing difference helps you choose the right effect hook for smooth UI updates.

6

Advanced

Concurrent mode changes effect timing

🤔Before reading on: do you think effects run immediately after render in concurrent mode? Commit to your answer.

Concept: React's concurrent mode can delay effect execution to keep the UI responsive.

In concurrent mode, React may pause or interrupt rendering to keep the app responsive. Effects run only after React commits the final UI. This means effects might run later than in normal mode, requiring careful effect design.

Result

Effects run more predictably without blocking user interactions, but timing can shift.

Knowing concurrent mode changes effect timing helps avoid bugs and design effects that work well with React's new rendering model.

7

Expert

Effect timing and React Server Components

🤔Before reading on: do you think effects run on the server or only in the browser? Commit to your answer.

Concept: React Server Components do not run effects; effects only run on the client after hydration.

Server Components render UI on the server without running effects because effects involve browser APIs. After the server sends HTML, the client hydrates and runs effects. This split changes when and where effects execute, impacting data fetching and UI updates.

Result

Effects run only in the browser, ensuring server rendering stays pure and fast.

Understanding this separation is crucial for building apps that use both server and client components effectively.

Under the Hood

React separates rendering into phases: first it builds the virtual UI tree, then commits changes to the real DOM. Effects are scheduled to run after the commit phase to avoid blocking rendering. React tracks dependencies to decide when to re-run effects and manages cleanup functions to prevent resource leaks. In concurrent mode, React can pause rendering and delay effects to keep the UI responsive. useLayoutEffect runs synchronously after DOM updates but before painting, while useEffect runs asynchronously after painting.

Why designed this way?

React's effect timing was designed to keep rendering fast and predictable by not blocking the UI with side effects. Running effects after commit ensures the DOM is up to date, so effects see the latest UI. The cleanup mechanism prevents resource leaks. useLayoutEffect exists to fix visual glitches by running earlier. Concurrent mode's delayed effects improve responsiveness. This design balances performance, correctness, and developer ergonomics.

┌───────────────┐
│ Render Phase  │
│ (Build VDOM)  │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Commit Phase  │
│ (Update DOM)  │
└──────┬────────┘
       │
       ├─────────────┐
       │             │
       ▼             ▼
┌───────────────┐ ┌───────────────┐
│ useLayoutEffect│ │  useEffect    │
│ (Sync, before │ │ (Async, after │
│  paint)       │ │  paint)       │
└───────────────┘ └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: do you think useEffect runs before the browser paints the screen? Commit to yes or no.

Common Belief: useEffect runs before the browser paints, so it can block UI updates.

Reality: useEffect runs after the browser paints, so it does not block UI rendering.

Why it matters: Believing effects block painting leads to unnecessary performance worries and wrong hook choices.

Quick: do you think useEffect runs on the server during server-side rendering? Commit to yes or no.

Common Belief: useEffect runs on the server during server-side rendering.

Reality: useEffect does not run on the server; it only runs in the browser after hydration.

Why it matters: Expecting effects on the server causes confusion about data fetching and side effects in SSR apps.

Quick: do you think cleanup functions run after the next effect or before? Commit to your answer.

Common Belief: Cleanup functions run after the next effect runs.

Reality: Cleanup functions run before the next effect runs or when the component unmounts.

Why it matters: Misunderstanding cleanup timing can cause resource leaks or duplicated subscriptions.

Quick: do you think useLayoutEffect and useEffect run at the same time? Commit to yes or no.

Common Belief: useLayoutEffect and useEffect run at the same time after rendering.

Reality: useLayoutEffect runs synchronously before painting, while useEffect runs asynchronously after painting.

Why it matters: Confusing these hooks leads to visual glitches or missed layout fixes.

Expert Zone

1

React batches multiple state updates and effect executions to optimize performance, which can affect when effects run in complex scenarios.

2

In concurrent mode, effects may be delayed or interrupted, so effects must be designed to handle being paused or restarted without side effects.

3

The order of multiple effects in a component is guaranteed, but effects across different components can run in any order, which matters for shared resource management.

When NOT to use

Avoid using useLayoutEffect for heavy or asynchronous operations because it blocks painting and hurts performance. Instead, use useEffect for non-urgent side effects. For server-side rendering, do not rely on effects for data fetching; use server data fetching methods instead.

Production Patterns

In production, effects are used for data fetching with dependency arrays to avoid redundant calls, cleanup subscriptions to prevent leaks, and useLayoutEffect to fix layout shifts. Developers also use custom hooks to encapsulate effect logic and handle concurrent mode gracefully.

Connections

Event Loop in JavaScript

Effect execution timing in React relies on the JavaScript event loop to schedule asynchronous callbacks.

Understanding the event loop helps explain why useEffect runs after painting and how React schedules effects without blocking UI.

Operating System Process Scheduling

React's concurrent mode effect timing is similar to how an OS schedules processes to keep the system responsive.

Knowing OS scheduling concepts clarifies why React delays or pauses effects to prioritize user interactions.

Cooking and Meal Preparation

Effect timing is like cooking after setting the table, ensuring the meal is ready when guests sit down.

This connection helps understand the importance of ordering tasks to create a smooth experience.

Common Pitfalls

#1 Running effects without dependencies causes infinite loops.

Wrong approach:

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

Correct approach:

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

Root cause:

Not providing a dependency array makes React run the effect after every render, causing repeated calls.

#2 Forgetting to clean up subscriptions leads to memory leaks.

Wrong approach:

useEffect(() => { const id = subscribe(); });

Correct approach:

useEffect(() => { const id = subscribe(); return () => unsubscribe(id); }, []);

Root cause:

Missing cleanup function means subscriptions persist even after component unmounts.

#3 Using useLayoutEffect for heavy async tasks blocks UI rendering.

Wrong approach:

useLayoutEffect(() => { fetchDataAsync(); }, []);

Correct approach:

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

Root cause:

useLayoutEffect runs synchronously before paint, so heavy async tasks block UI and cause jank.

Key Takeaways

React runs effects after rendering and DOM updates to keep UI smooth and predictable.

The dependency array controls when effects run, preventing unnecessary or infinite executions.

Cleanup functions run before the next effect or on unmount to avoid resource leaks.

useLayoutEffect runs earlier than useEffect, letting you fix layout issues before the screen updates.

Concurrent mode changes effect timing to improve responsiveness, requiring careful effect design.