What is the "lifecycle" of a component in React?

ReactJunior~2 min read

Main stages of the lifecycle

Stage	What happens
Mounting	The component is created and inserted into the DOM for the first time
Updating	The component re-renders due to changes in `props` or `state`
Unmounting	The component is removed from the DOM
(optional) - Error	An error occurs in the descendants and React invokes an error boundary

How this looks in practice

1. Mounting

Happens when the component first appears in the DOM. React:

calls the component function (or constructor in a class);
renders the JSX;
inserts the result into the DOM;
runs all effects with empty dependencies (useEffect(..., [])).

javascript

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

Here you can:

load data (fetch);
subscribe to events;
set up timers, listeners, external libraries.

2. Updating

The component re-renders when either of these change:

its props (input data);
its state (internal state).

javascript

useEffect(() => {
  console.log("Updating");
}, [stateOrProp]);

Here you can:

react to changes (for example, recompute data);
synchronize the DOM with the new state;
update subscriptions.

3. Unmounting

The component is removed from the DOM (for example, on a page change, hiding a modal, etc.).

At this moment, the cleanup function from useEffect is called:

javascript

useEffect(() => {
  console.log("Mounting");
  return () => {
    console.log("Unmounting");
    // cleanup: unsubscribes, timers, canceling requests
  };
}, []);

Here you need to:

clear timers (clearInterval);
remove event handlers (removeEventListener);
cancel subscriptions or requests.

Illustration of the lifecycle (functional component)

javascript

Mount → Update → Update → Unmount

React automatically calls the component again on every data change, and hooks (useEffect) let you perform the needed actions at the right moment.

Example of a full cycle

javascript

function Example({ value }) {
  useEffect(() => {
    console.log("Mounting");

    return () => {
      console.log("Unmounting");
    };
  }, []);

  useEffect(() => {
    console.log("Updating: value =", value);
  }, [value]);

  return <div>{value}</div>;
}

Console log:

javascript

Mounting
Updating: value = 1
Updating: value = 2
Unmounting

For clarity - the equivalent class methods

Class method	Equivalent with functional hooks
`componentDidMount`	`useEffect(() => {...}, [])`
`componentDidUpdate`	`useEffect(() => {...}, [deps])`
`componentWillUnmount`	`useEffect(() => {return () => {...}}, [])`

That is, everything that used to be done in these methods is now done with useEffect and its cleanup function.

Important to remember

Behavior	Description
`useEffect` runs after the render and the DOM paint	It does not block the UI
`useLayoutEffect` runs before the paint	For synchronizing with the DOM
Every re-render of a component is a new "update"	React calls its function again
An effect with `[ ]` dependencies fires only on mount and unmount	"once"
An effect with `[deps]` fires on every dependency change	"on update"

Summary

Stage	What React does	What you can do
Mount	Inserts the component into the DOM	Load data, subscribe
Update	Updates on props/state changes	React to changes
Unmount	Removes the component from the DOM	Clean up resources, timers, subscriptions

The main idea:

The "lifecycle" is a sequence of stages (mount → update → unmount), and hooks (useEffect, useLayoutEffect) let you control the component's behavior at every stage.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.