Component Lifecycle

Component Lifecycle

Every React component goes through a lifecycle of three main phases: Mounting, Updating, and Unmounting.

Understanding these phases is crucial for knowing when to fetch data, set up subscriptions, or clean up resources.

1. Mounting (Birth)

Mounting is the phase when a component is created and inserted into the DOM for the very first time.

What happens:

1. React calls the component function.
2. React takes the returned JSX and constructs the initial DOM nodes.
3. The browser paints the screen.
4. If there are any useEffect hooks, React runs them after the paint.

In old Class Components, this phase was associated with the componentDidMount lifecycle method.

2. Updating (Growth)

A component updates whenever there is a change to its state or its props.

What happens:

1. React calls the component function again with the new state/props.
2. React compares the new JSX output with the previous output (Reconciliation).
3. React applies only the necessary changes to the actual DOM.
4. The browser repaints the updated parts of the screen.
5. React cleans up the previous useEffect (if dependencies changed) and runs the new useEffect.

In old Class Components, this phase was associated with the componentDidUpdate lifecycle method.

3. Unmounting (Death)

Unmounting is the phase when a component is removed from the DOM. This happens when the component is no longer rendered by its parent (e.g., hiding it via conditional rendering, or navigating to a new page).

What happens:

1. React calls the cleanup functions returned by any active useEffect hooks.
2. React removes the component’s nodes from the DOM.
3. The component and its state are destroyed and garbage collected.

In old Class Components, this phase was associated with the componentWillUnmount lifecycle method.

The Mental Shift with Hooks

While it is helpful to understand the Mount/Update/Unmount paradigm, React Hooks (specifically useEffect) encourage a different mental model. Instead of thinking about “lifecycle events”, you should think about synchronization.

An Effect synchronizes your component with an external system. It “starts synchronizing” when the component mounts, “re-synchronizes” when dependencies change during updates, and “stops synchronizing” when it unmounts.

Interview Questions

Q: What are the three main phases of a React component’s lifecycle?
A:

1. Mounting: The component is created and inserted into the DOM.
2. Updating: The component is re-rendered due to changes in state, props, or context.
3. Unmounting: The component is permanently removed from the DOM.