Multiple effects in a component in React - Deep Dive

Overview - Multiple effects in a component

What is it?

In React, a component can have multiple effects using the useEffect hook. Each effect runs independently and can handle different tasks like fetching data, updating the document title, or setting up event listeners. This helps keep code organized and focused on one job per effect. Multiple effects run in the order they are declared inside the component.

Why it matters

Without multiple effects, all side tasks would be mixed in one place, making code hard to read and maintain. Separating concerns into multiple effects makes debugging easier and prevents bugs caused by unrelated logic interfering. It also improves performance by running only the necessary effect when its dependencies change.

Where it fits

Before learning this, you should understand React functional components and the basic useEffect hook. After this, you can learn advanced hooks patterns, custom hooks, and performance optimization techniques in React.

Mental Model

Core Idea

Multiple useEffect hooks let a component handle different side tasks separately and clearly.

Think of it like...

It's like having different helpers in a kitchen: one handles chopping vegetables, another boils water, and another sets the table. Each helper focuses on one job, making the whole meal preparation smooth and organized.

Component
  ├─ useEffect #1: fetch data
  ├─ useEffect #2: update title
  └─ useEffect #3: event listener

Each effect runs independently in order.

Build-Up - 6 Steps

1

Foundation

Understanding useEffect basics

Concept: Learn what useEffect does and how it runs after rendering.

useEffect is a React hook that runs a function after the component renders. It can run once, on every render, or when specific values change. It helps perform side tasks like fetching data or updating the page title.

Result

You can run code after the component shows on screen, reacting to changes.

Understanding useEffect is key because it controls when and how side tasks happen in React components.

2

Foundation

Single effect with dependencies

Concept: Learn how to run an effect only when certain values change.

By passing a dependency array to useEffect, React runs the effect only when those values change. For example, useEffect(() => { /* code */ }, [count]) runs only when count changes.

Result

Effects run efficiently, avoiding unnecessary work on every render.

Knowing dependencies lets you control effect timing and avoid performance issues.

3

Intermediate

Using multiple useEffect hooks

🤔Before reading on: do you think multiple useEffect hooks run together or one cancels the other? Commit to your answer.

Concept: A component can have many useEffect hooks, each for a different task.

Instead of putting all side tasks in one useEffect, split them into multiple hooks. For example, one effect fetches data, another updates the document title, and another sets up event listeners. React runs them in the order they appear.

Result

Code is cleaner and each effect focuses on one responsibility.

Understanding that effects are independent helps organize code and avoid bugs from mixing unrelated logic.

4

Intermediate

Effect cleanup with multiple effects

🤔Before reading on: do you think cleanup functions from multiple effects run all or only one? Commit to your answer.

Concept: Each useEffect can return a cleanup function to undo its work when dependencies change or component unmounts.

When you have multiple effects, each cleanup runs separately. For example, one effect might remove an event listener, another might cancel a timer. React calls cleanup functions before running the effect again or when the component leaves the screen.

Result

Resources are freed properly and side effects don't pile up.

Knowing cleanup runs per effect prevents memory leaks and unexpected behavior.

5

Advanced

Ordering and timing of multiple effects

🤔Before reading on: do you think useEffect hooks run in the order declared or randomly? Commit to your answer.

Concept: React runs multiple useEffect hooks in the order they appear after rendering completes.

Effects run after the DOM updates, one after another in declaration order. Cleanup functions run before the next effect or on unmount. This predictable order helps when effects depend on each other or shared state.

Result

You can reason about side effects timing and avoid race conditions.

Understanding effect order helps coordinate complex side effects safely.

6

Expert

Performance and pitfalls with multiple effects

🤔Before reading on: do you think splitting effects always improves performance? Commit to your answer.

Concept: While multiple effects improve clarity, too many or poorly managed effects can hurt performance or cause bugs.

Each effect adds overhead. If effects share dependencies or cause repeated renders, it can slow the app. Also, effects that update state can trigger other effects, causing loops. Experts carefully design dependencies and combine effects when needed to balance clarity and efficiency.

Result

Well-structured effects improve maintainability without sacrificing speed.

Knowing when to combine or separate effects is key to writing robust, performant React components.

Under the Hood

React keeps a list of all useEffect hooks declared in a component. After rendering, React runs each effect's function in order. If an effect returns a cleanup function, React stores it and calls it before the next effect run or when the component unmounts. React tracks dependencies to decide when to rerun each effect, avoiding unnecessary work.

Why designed this way?

React designed useEffect to separate side effects from rendering logic, improving code clarity and preventing blocking UI updates. Allowing multiple effects lets developers organize code by concern. The cleanup mechanism prevents resource leaks. This design balances simplicity, flexibility, and performance.

Component Render
  │
  ├─ useEffect #1 run → stores cleanup #1
  ├─ useEffect #2 run → stores cleanup #2
  └─ useEffect #3 run → stores cleanup #3

On update:
  ├─ cleanup #1 run
  ├─ useEffect #1 run
  ├─ cleanup #2 run
  ├─ useEffect #2 run
  └─ cleanup #3 run
     useEffect #3 run

Myth Busters - 4 Common Misconceptions

Quick: Do multiple useEffect hooks merge into one or run separately? Commit to your answer.

Common Belief: All useEffect hooks combine into a single effect that runs together.

Reality: Each useEffect hook runs independently in the order declared.

Why it matters: Believing they merge can cause confusion when effects behave differently or cleanup runs unexpectedly.

Quick: Does useEffect run before or after rendering? Commit to your answer.

Common Belief: useEffect runs before the component renders to prepare things.

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

Why it matters:

Quick: Does cleanup run only on unmount or also on dependency change? Commit to your answer.

Common Belief: Cleanup functions run only when the component unmounts.

Reality: Cleanup runs before the effect reruns due to dependency changes and on unmount.

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

Quick: Does splitting effects always improve performance? Commit to your answer.

Common Belief: More useEffect hooks always make the app faster and cleaner.

Reality: Too many effects or poorly managed dependencies can cause extra renders and slowdowns.

Why it matters: Assuming more effects are always better can lead to inefficient code and bugs.

Expert Zone

1

Effects with overlapping dependencies can cause subtle bugs if their cleanup and setup order is not carefully managed.

2

React batches state updates triggered inside effects, but effects themselves run sequentially, which can affect timing-sensitive logic.

3

Custom hooks often combine multiple effects internally, hiding complexity but requiring careful dependency management.

When NOT to use

Avoid multiple effects when side tasks are tightly coupled and share dependencies; instead, combine them into one effect to reduce overhead. For synchronous logic or derived state, useMemo or useCallback may be better alternatives.

Production Patterns

In real apps, developers separate data fetching, subscriptions, and UI updates into distinct effects. They use custom hooks to encapsulate complex effect logic and carefully manage dependencies to prevent infinite loops or stale data.

Connections

Event-driven programming

Multiple effects resemble separate event handlers reacting to different triggers.

Understanding event-driven design helps grasp why separating effects improves clarity and responsiveness.

Unix shell pipelines

Like chaining commands where each does one job, multiple effects chain side tasks cleanly.

This connection shows how breaking tasks into small steps improves maintainability and debugging.

Project management (task delegation)

Assigning different effects to handle specific tasks is like delegating work to team members.

Knowing this helps appreciate how separation of concerns reduces errors and improves collaboration.

Common Pitfalls

#1 Combining unrelated side effects in one useEffect.

Wrong approach:

useEffect(() => {
fetchData();
document.title = `Count: ${count}`;
}, [count]);

Correct approach:

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

useEffect(() => {
document.title = `Count: ${count}`;
}, [count]);

Root cause:

Misunderstanding that effects can and should be split by responsibility.

#2 Forgetting to add dependencies, causing stale data or infinite loops.

Wrong approach:

useEffect(() => {
setTimeout(() => console.log(count), 1000);
}, []);

Correct approach:

useEffect(() => {
setTimeout(() => console.log(count), 1000);
}, [count]);

Root cause:

Not realizing dependencies control when effects rerun and capture fresh values.

#3 Not cleaning up event listeners in effects.

Wrong approach:

useEffect(() => {
window.addEventListener('resize', handleResize);
}, []);

Correct approach:

useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);

Root cause:

Ignoring cleanup leads to memory leaks and multiple handlers stacking.

Key Takeaways

Multiple useEffect hooks let you organize side effects by their specific tasks, improving code clarity and maintainability.

Each useEffect runs independently and in the order declared, with its own cleanup function to manage resources safely.

Properly managing dependencies in each effect prevents bugs like stale data, infinite loops, or unnecessary reruns.

While splitting effects helps organization, too many or poorly designed effects can hurt performance and cause bugs.

Understanding the lifecycle and timing of effects is essential for building robust, efficient React components.