React Hooks Lifecycle: Mount, Update, and Unmount

The Three Phases of a Component's Life

At a high level, every interaction with a React component, from its first appearance to its last update, can be broken down into three phases: Trigger, Render, and Commit.

To get a solid grasp of this model, please read the following section from an article that explains these phases clearly.

To summarize the key ideas from the reading:

1. Trigger: A render is triggered either by the component mounting for the first time or by a change in its state or props.
2. Render: In this phase, React calls your component function. It's a "pure" calculation step where React determines what the UI should look like. Nothing has been changed on the screen yet. The result of this phase is a new "snapshot" of the UI, often called the Virtual DOM.
3. Commit: React takes the snapshot from the render phase, compares it to what's currently on the screen (the DOM), and applies only the necessary changes. This is the phase where the user actually sees the update.

This Trigger -> Render -> Commit sequence is the fundamental process behind every visual change in a React application.

The Lifecycle in Action: Mount, Update, and Unmount

Now, let's map this conceptual model onto the three concrete stages of a component's life: mounting, updating, and unmounting.

The following video provides a fantastic visual walkthrough of these stages. We'll watch it in three parts.

1. Mounting: The Initial Render

The first time a component is displayed, it goes through the mount phase. This is its very first Trigger -> Render -> Commit cycle.

During the mount phase:

• React runs the code in your component function from top to bottom.
• useState is called, and its initial value is set.
• React renders the JSX and commits it to the DOM, making it visible (this is often called "painting the screen").
• Finally, after the component is visible, React runs the code inside useEffect hooks that have an empty dependency array ([]) or no dependency array at all.

2. Updating: Responding to Change

After mounting, a component can update many times in response to changes in its state or props. Each update is a new Trigger -> Render -> Commit cycle.

During an update:

• A state change (e.g., via a setCounter function) or a prop change triggers a new render.
• React runs your component function again to calculate the new UI snapshot. useState now returns the current state value, not the initial one.
• React compares the new snapshot to the old one and commits only the differences to the DOM.
• If you have a useEffect hook with dependencies, its cleanup function from the previous render runs first. Then, if any dependencies have changed, the effect function runs again after the commit.

3. Unmounting: Cleaning Up

When a component is no longer needed (e.g., the user navigates to a different screen), it enters the unmount phase. This is its final moment.

During unmounting:

• React removes the component from the DOM.
• The cleanup function returned from useEffect is executed. This is critical for preventing memory leaks by stopping timers, unsubscribing from data sources, or removing event listeners.

Here is a diagram that visually summarizes how hooks fit into these lifecycle phases.

Under the Hood: How Do Hooks Actually Work?

You expressed a keen interest in understanding the mechanics, so let's dig into a question that puzzles many developers: How does React keep track of a useState value between renders? The answer explains why there are strict rules for using hooks.

The core idea is that for each component, React maintains an internal array of hooks. It relies on the call order of your hooks being identical on every single render to retrieve the correct state for each hook.

This next video does a brilliant job of explaining this by reverse-engineering a simplified useState.

Because hooks are just array entries, if you were to call useState inside a conditional, you could change the number of hooks and their order between renders. This would cause React to retrieve the wrong state from its internal array, leading to unpredictable bugs.

• On first render: [stateA, stateB]
• On second render (if a condition is false): [stateB] -> Now calling the second hook actually retrieves the value of stateA!

This principle of stable call order is the most important rule of hooks.

For a deeper textual explanation with code you can analyze, this article reinforces the same concepts.

Key Takeaways

• A component's life consists of three main stages: Mounting (initial creation), Updating (re-rendering due to state/prop changes), and Unmounting (removal and cleanup).
• Each mount or update follows a Trigger -> Render -> Commit sequence. The 'Render' phase is a pure calculation, while the 'Commit' phase is when the DOM is physically changed.
• Side effects, managed by useEffect, run after the component has rendered and been committed to the screen.
• The cleanup function from useEffect is crucial. It runs before the component unmounts and before the effect runs again on a subsequent update.
• React tracks hook data using an internal array. The stable call order of hooks on every render is essential for React to function correctly.

This lesson provided the "big picture" of the component lifecycle. With this foundation, you're now equipped to understand not just what hooks do, but when and why they do it.

In our next lesson, we will dive deeper into the most common hook, useState, and its more powerful alternative, useReducer, to manage component state of varying complexity.