How to Update Class Components in React

In React, updating class components is a fundamental process driven by changes to state or props, which triggers a re-render of the user interface. This article explains the primary mechanisms used to update class components—specifically through state modification, receiving new props, and utilizing the forceUpdate method—while outlining the key lifecycle methods that execute during this update cycle.

Triggering an Update

An update in a React class component is caused by one of three events: a change in state, a change in props, or a call to forceUpdate().

1. Modifying State with this.setState()

The primary way to update a class component is by changing its local state using this.setState(). You should never modify this.state directly, as React will not detect the change to trigger a re-render.

// Correct way to update state
this.setState({ count: this.state.count + 1 });

Because this.setState() is asynchronous, if your new state depends on the previous state, you should use the updater function syntax to prevent race conditions:

this.setState((prevState) => ({
  count: prevState.count + 1
}));

2. Receiving New Props

When a parent component passes new props to a child class component, React automatically schedules an update. The child component will re-render to reflect the new data received from its parent.

3. Forcing an Update with this.forceUpdate()

By default, if your component’s render method depends on some other data, you can tell React to re-render by calling this.forceUpdate().

this.forceUpdate();

Note: Using forceUpdate() bypasses shouldComponentUpdate() and is generally discouraged because it deviates from React’s declarative nature.

The Update Lifecycle Methods

When a class component updates, React executes a specific sequence of lifecycle methods. Understanding these methods allows you to hook into the update process for optimization and side effects.

1. static getDerivedStateFromProps(props, state)

This method is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing. It is used sparingly when state depends on changes in props over time.

2. shouldComponentUpdate(nextProps, nextState)

This method acts as a performance gatekeeper. It returns a boolean (true by default) indicating whether React should proceed with the rendering of the component after a change in state or props. Returning false prevents the re-render.

shouldComponentUpdate(nextProps, nextState) {
  // Only update if the count has changed
  return nextState.count !== this.state.count;
}

3. render()

The only required method in a class component. It examines this.props and this.state and returns the JSX elements representing the updated UI.

4. getSnapshotBeforeUpdate(prevProps, prevState)

This method is called right before the rendered output is committed to the DOM. It enables your component to capture some information from the DOM (such as scroll position) before it is potentially changed. Any value returned by this lifecycle will be passed as a third parameter to componentDidUpdate().

5. componentDidUpdate(prevProps, prevState, snapshot)

This method is invoked immediately after updating occurs. It is not called for the initial render. This is the ideal place to perform DOM operations, network requests, or helper state updates based on comparing previous and current props/state.

componentDidUpdate(prevProps, prevState) {
  if (prevProps.userID !== this.props.userID) {
    this.fetchUserData(this.props.userID);
  }
}