Lifecycle mapping with hooks in React - Deep Dive

Overview - Lifecycle mapping with hooks

What is it?

Lifecycle mapping with hooks is a way to control what happens in a React component at different times, like when it first appears, updates, or disappears. Instead of using older class-based methods, hooks let you use simple functions to run code at these key moments. This helps you manage things like data loading, timers, or cleanup in a clear and organized way. Hooks make component behavior easier to write and understand.

Why it matters

Without lifecycle mapping, components would not know when to start or stop important tasks, causing bugs or wasted resources. Before hooks, managing lifecycle was more complex and scattered, making code harder to maintain. Hooks solve this by giving a clear, consistent way to run code at the right time, improving app performance and developer happiness. This means smoother apps and faster development.

Where it fits

Learners should know basic React components and JavaScript functions before learning lifecycle mapping with hooks. After this, they can explore advanced hooks, custom hooks, and state management libraries. This topic builds the foundation for writing clean, efficient React components that respond to user actions and data changes.

Mental Model

Core Idea

Hooks let you run code at specific moments in a component’s life using simple functions instead of complex classes.

Think of it like...

It’s like setting alarms for different times of the day to remind you to do tasks: one alarm for waking up, another for lunch, and one for bedtime. Hooks set these alarms inside components to do things at the right time.

┌───────────────┐
│ Component     │
│ Lifecycle     │
│ Moments       │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ useEffect     │<── Runs code on mount, update, unmount
│ useLayoutEffect│<── Runs code after DOM updates
│ useState      │<── Holds data that triggers updates
└───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding React component lifecycle

Concept: Learn the basic phases a React component goes through: mounting, updating, and unmounting.

React components appear on screen (mount), change when data or props change (update), and disappear when removed (unmount). Each phase can trigger special code to run, like fetching data or cleaning up resources.

Result

You know the three main lifecycle phases and why they matter for component behavior.

Understanding these phases helps you know when to run code to keep your app responsive and efficient.

2

Foundation

Introduction to React hooks basics

Concept: Hooks are functions that let you use React features like state and lifecycle inside functional components.

useState lets you add data that changes over time. useEffect lets you run code after rendering. These replace older class methods and make components simpler.

Result

You can write a functional component with state and side effects using hooks.

Knowing hooks basics is essential before mapping lifecycle events with them.

3

Intermediate

Mapping mount and unmount with useEffect

🤔Before reading on: do you think useEffect runs only once on mount or every render? Commit to your answer.

Concept: useEffect can run code when a component appears (mount) and clean up when it disappears (unmount).

By passing an empty array [] as the second argument to useEffect, the effect runs only once after the first render (mount). Returning a function inside useEffect lets you clean up when the component unmounts.

Result

You can run setup code once and cleanup code when the component leaves the screen.

Understanding how dependencies control useEffect timing prevents bugs like repeated API calls or memory leaks.

4

Intermediate

Handling updates with useEffect dependencies

🤔Before reading on: do you think useEffect runs when any state changes or only specific ones? Commit to your answer.

Concept: useEffect runs after renders when specified data changes, controlled by a dependency array.

By listing variables in the dependency array, useEffect runs only when those variables change. This lets you react to specific updates, like fetching new data when a prop changes.

Result

You can run code precisely when certain data updates, improving performance and correctness.

Knowing how to control effect timing with dependencies helps avoid unnecessary work and bugs.

5

Intermediate

Using useLayoutEffect for DOM updates

Concept: useLayoutEffect runs synchronously after DOM changes but before the browser paints, useful for measuring or changing layout.

Unlike useEffect, useLayoutEffect blocks painting until it finishes. This is helpful when you need to read or modify the DOM immediately after changes, like adjusting scroll position.

Result

You can perform layout-related tasks without flicker or visual glitches.

Understanding the difference between useEffect and useLayoutEffect helps you choose the right tool for smooth UI updates.

6

Advanced

Cleaning up side effects properly

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

Concept: Returning a cleanup function in useEffect runs before the next effect or when the component unmounts, preventing resource leaks.

Cleanup functions stop timers, cancel subscriptions, or undo changes to avoid bugs. They run before the next effect if dependencies change, or on unmount if the component leaves.

Result

Your components free resources correctly, avoiding memory leaks and unexpected behavior.

Knowing when cleanup runs prevents common bugs with timers, event listeners, or subscriptions.

7

Expert

Avoiding stale closures in effects

🤔Before reading on: do you think useEffect always sees the latest state or can it capture old values? Commit to your answer.

Concept: Effects capture variables from their creation time, which can cause them to use outdated data unless handled carefully.

Because useEffect’s function closes over variables, it may use stale state if dependencies are missing. Using refs or updating dependencies correctly ensures effects see fresh data.

Result

Your effects behave correctly with the latest state, avoiding bugs like ignoring user input or outdated API calls.

Understanding closures in hooks is key to writing reliable, bug-free effects.

Under the Hood

React tracks hooks calls in the order they appear during rendering. useEffect schedules its callback to run after the browser paints, while useLayoutEffect runs earlier, blocking paint. React compares dependency arrays to decide if effects should rerun. Cleanup functions are stored and called before the next effect or unmount. This system lets React manage side effects efficiently without classes.

Why designed this way?

Hooks were designed to simplify component logic by avoiding complex class lifecycles and 'this' binding. The dependency array lets React optimize effect runs, improving performance. useLayoutEffect exists to handle cases needing immediate DOM reads or writes, which useEffect’s async timing cannot guarantee. This design balances simplicity, power, and performance.

Render phase:
┌───────────────┐
│ Component     │
│ renders hooks │
└──────┬────────┘
       │
       ▼
Effect phase:
┌───────────────┐
│ useLayoutEffect│───runs before paint
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Browser paint │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ useEffect     │───runs after paint
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does useEffect run only once if you omit the dependency array? Commit yes or no.

Common Belief: If you leave out the dependency array, useEffect runs only once on mount.

Reality: Without a dependency array, useEffect runs after every render, causing repeated executions.

Why it matters: This can cause infinite loops or performance issues if effects trigger state changes.

Quick: Does useLayoutEffect run asynchronously after painting? Commit yes or no.

Common Belief: useLayoutEffect runs asynchronously like useEffect, so it doesn’t block rendering.

Reality: useLayoutEffect runs synchronously before the browser paints, blocking rendering until it finishes.

Why it matters: Misusing useLayoutEffect can cause UI delays or flickers if heavy work is done.

Quick: Can you safely omit dependencies in useEffect if you only want to run code once? Commit yes or no.

Common Belief: You can omit dependencies to run useEffect only once on mount without issues.

Reality: Omitting dependencies can cause stale data or missed updates, leading to bugs.

Why it matters: Ignoring dependencies breaks React’s update logic and can cause inconsistent UI or logic errors.

Quick: Does useEffect always see the latest state inside its callback? Commit yes or no.

Common Belief: useEffect callbacks always have access to the latest state and props.

Reality: useEffect captures variables at creation time, so it may use outdated state unless dependencies or refs are handled properly.

Why it matters: This causes bugs where effects act on old data, confusing developers and users.

Expert Zone

1

Effects run after every render by default, but React batches updates to optimize performance, which can affect timing.

2

The order of hooks calls must be consistent between renders; changing order breaks React’s hook tracking and causes errors.

3

Custom hooks can encapsulate lifecycle logic, but must carefully manage dependencies to avoid subtle bugs.

When NOT to use

Avoid using useLayoutEffect for heavy or asynchronous tasks as it blocks painting and hurts performance. For simple side effects that don’t affect layout, use useEffect instead. If you need to manage complex lifecycles or state, consider state management libraries or React’s concurrent features.

Production Patterns

In real apps, useEffect is used for data fetching, event listeners, and timers with proper cleanup. useLayoutEffect handles layout measurements or animations. Developers create custom hooks to reuse lifecycle logic across components, improving code reuse and clarity.

Connections

Event-driven programming

Lifecycle hooks are a form of event handling triggered by component state changes.

Understanding lifecycle hooks as event listeners helps grasp how React responds to changes and manages side effects.

Operating system process lifecycle

Component lifecycle phases mirror OS process states like start, run, and terminate.

Seeing components as processes clarifies why setup and cleanup are critical to avoid resource leaks.

Project management phases

Just like projects have initiation, execution, and closure phases, components have mount, update, and unmount phases.

This connection helps understand the importance of planning work at each lifecycle stage for smooth operation.

Common Pitfalls

#1 Running effects on every render unintentionally

Wrong approach:

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

Correct approach:

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

Root cause:

Omitting the dependency array causes the effect to run after every render instead of just once.

#2 Not cleaning up subscriptions or timers

Wrong approach:

useEffect(() => { const id = setInterval(() => console.log('tick'), 1000); });

Correct approach:

useEffect(() => { const id = setInterval(() => console.log('tick'), 1000); return () => clearInterval(id); }, []);

Root cause:

Missing cleanup function causes timers or subscriptions to continue after component unmount, leading to memory leaks.

#3 Using stale state inside effects

Wrong approach:

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

Correct approach:

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

Root cause:

Not listing state variables in dependencies causes effects to capture old values and ignore updates.

Key Takeaways

React hooks provide a simple, functional way to manage component lifecycle events without classes.

useEffect runs code after rendering and can be controlled with dependencies to run only when needed.

Proper cleanup in effects prevents resource leaks and bugs in your app.

useLayoutEffect runs earlier than useEffect and is useful for layout-related tasks but can block rendering.

Understanding closures and dependencies in hooks is essential to avoid stale data and ensure correct behavior.

Practice

1. Which React hook is used to run code after a component renders, replacing lifecycle methods like componentDidMount and componentDidUpdate?

easy

A. useEffect

B. useState

C. useContext

D. useRef

Solution

1. Step 1: Understand lifecycle replacement

   The useEffect hook runs code after rendering, replacing lifecycle methods like componentDidMount and componentDidUpdate.

2. Step 2: Identify the correct hook

   useState manages state, useContext accesses context, and useRef stores mutable values. Only useEffect runs side effects after render.

3. Final Answer:

   useEffect -> Option A

4. Quick Check:

   Effect hook = useEffect [OK]

Hint: useEffect runs code after render like lifecycle methods [OK]

Common Mistakes:

• Confusing useState with useEffect
• Thinking useRef runs effects
• Believing useContext triggers after render

2. Which of the following is the correct syntax to run an effect only once when a React component mounts using useEffect?

easy

A. useEffect(() => { /* code */ }, null);

B. useEffect(() => { /* code */ });

C. useEffect(() => { /* code */ }, true);

D. useEffect(() => { /* code */ }, []);

Solution

1. Step 1: Understand dependency array usage

   Passing an empty array [] as the second argument to useEffect makes it run only once after the first render (component mount).

2. Step 2: Analyze each option

   useEffect(() => { /* code */ }); runs after every render. useEffect(() => { /* code */ }, true); runs after every render since non-array dependencies are ignored. useEffect(() => { /* code */ }, null); with null also runs after every render as it's not an array.

3. Final Answer:

   useEffect(() => { /* code */ }, []); -> Option D

4. Quick Check:

   Empty array = run once [OK]

Hint: Empty dependency array runs effect once on mount [OK]

Common Mistakes:

• Omitting dependency array causes effect every render
• Using null instead of empty array
• Passing non-array values like true or null as dependencies

3. What will be logged to the console when the following React component mounts and then the count state changes?

function Counter() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log('Count is', count);
  }, [count]);
  return  setCount(count + 1)}>Increment;
}

medium

A. Logs 'Count is 0' once on mount only

B. Logs 'Count is 0' repeatedly every second

C. Logs 'Count is 0' on mount and 'Count is 1' after first click

D. Logs nothing because useEffect has dependencies

Solution

1. Step 1: Understand useEffect with dependency

   The effect runs after the component mounts and whenever count changes because count is in the dependency array.

2. Step 2: Trace the console logs

   On mount, count is 0, so it logs 'Count is 0'. After clicking the button, count becomes 1, triggering the effect again and logging 'Count is 1'.

3. Final Answer:

   Logs 'Count is 0' on mount and 'Count is 1' after first click -> Option C

4. Quick Check:

   Effect runs on mount and dependency change [OK]

Hint: Effect runs on mount and when dependencies change [OK]

Common Mistakes:

• Thinking effect runs only once without dependencies
• Assuming no logs because dependencies exist
• Confusing useEffect with setInterval

4. Identify the problem in this React component that uses useEffect and suggest the fix:

function Timer() {
  React.useEffect(() => {
    const id = setInterval(() => console.log('Tick'), 1000);
  }, []);
  return <div>Timer</div>;
}

medium

A. No problem; code works fine as is

B. Missing cleanup function to clear the interval on unmount

C. Dependency array should include 'id' to update interval

D. setInterval should be replaced with setTimeout

Solution

1. Step 1: Analyze effect side effects

   The effect sets an interval but does not clear it, causing a memory leak when the component unmounts.

2. Step 2: Suggest cleanup function

   Return a cleanup function from useEffect that calls clearInterval(id) to stop the interval on unmount.

3. Final Answer:

   Missing cleanup function to clear the interval on unmount -> Option B

4. Quick Check:

   Cleanup prevents memory leaks [OK]

Hint: Always clean intervals/timeouts in useEffect cleanup [OK]

Common Mistakes:

• Forgetting to clear intervals causing leaks
• Adding dependencies unnecessarily
• Replacing setInterval with setTimeout incorrectly

5. You want to fetch user data only once when a component mounts and cancel the fetch if the component unmounts before it finishes. Which is the best way to implement this using useEffect?

hard

A. useEffect(() => {
const controller = new AbortController();
fetch('/user', { signal: controller.signal })
.then(res => res.json())
.then(data => console.log(data));
return () => controller.abort();
}, []);

B. useEffect(() => {
fetch('/user').then(res => res.json()).then(data => console.log(data));
}, []);

C. useEffect(() => {
fetch('/user').then(res => res.json()).then(data => console.log(data));
return () => console.log('Cleanup');
}, []);

D. useEffect(() => {
fetch('/user').then(res => res.json()).then(data => console.log(data));
}, [fetch]);

Solution

1. Step 1: Understand fetch cancellation

   To cancel a fetch request on unmount, use an AbortController and pass its signal to fetch.

2. Step 2: Implement cleanup to abort fetch

   Return a cleanup function from useEffect that calls controller.abort() to cancel the fetch if unmount happens early.

3. Final Answer:

   Use AbortController with cleanup to abort fetch -> Option A

4. Quick Check:

   AbortController + cleanup = safe fetch [OK]

Hint: Use AbortController and cleanup to cancel fetch on unmount [OK]

Common Mistakes:

• Not cancelling fetch causing memory leaks
• Logging cleanup without aborting fetch
• Adding fetch to dependencies unnecessarily