The React Component Lifecycle, Explained Simply

Every React component goes through a lifecycle. I like to picture it the way living things work: a birth, a life of updates, and eventually a death. React gives you methods to hook into each of those moments.

This is the class-component model. Hooks cover the same ground with useEffect today — but understanding the lifecycle is what makes those hooks click into place.

The three phases

Mounting — the component is created and inserted into the DOM. Updating — its props or state change and it re-renders. Unmounting — it is removed from the DOM.

render()

render() is the one method every class component must have, and its only job is to describe the UI. It runs on mount and on every update, so keep it pure: no side effects, no setState, no API calls.

componentDidMount()

Called once, right after the component lands in the DOM. This is the place to fetch data from a remote endpoint.

componentDidMount() {
  fetch('/api/user')
    .then((r) => r.json())
    .then((user) => this.setState({ user }));
}

Unlike render(), you are allowed to call setState() here. It triggers a second render, but React applies it before the browser paints, so the user never sees the intermediate state flicker.

componentDidUpdate()

Runs after every update — the place to react to a prop or state change, like refetching when an id changes. The catch: if you call setState() here you must guard it, or you will spin up an infinite render loop.

componentDidUpdate(prevProps) {
  if (prevProps.userId !== this.props.userId) {
    this.loadUser(this.props.userId);
  }
}

componentWillUnmount()

Called just before the component is destroyed. Do your cleanup here — cancel timers, unsubscribe from listeners, abort in-flight requests. Do not call setState(); the component is on its way out.

A quick recap

render() is pure and required. componentDidMount() is for setup and the first fetch. componentDidUpdate() reacts to changes — guard your setState. componentWillUnmount() is for cleanup. And there is a bonus you will reach for rarely: shouldComponentUpdate(), which lets you tell React to skip a re-render for a specific change. Use it sparingly, and only once you have measured a real problem.