What does shouldComponentUpdate() do?

ReactJunior~2 min read

Definition

shouldComponentUpdate(nextProps, nextState) is a lifecycle method that is called before a re-render. It must return true or false, so React knows whether it needs to run render().

When it is called

The sequence during a component update:

javascript

props/state changed
   ↓
shouldComponentUpdate()   ← called
   ↓ (if it returned true)
render()
   ↓
commit phase → componentDidUpdate()

If the method returns false, React skips the render and commit phase for this component and its descendants.

Signature

javascript

shouldComponentUpdate(nextProps, nextState) {
  // return true → the component will re-render
  // return false → React will skip the update
}

Argument	What it holds
`nextProps`	The new props the component is about to receive
`nextState`	The new state that is about to be set

Example

javascript

class Counter extends React.Component {
  state = { count: 0 };

  shouldComponentUpdate(nextProps, nextState) {
    // Re-render only if count changed
    return nextState.count !== this.state.count;
  }

  render() {
    console.log('render');
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        {this.state.count}
      </button>
    );
  }
}

What happens:

On setState, React calls shouldComponentUpdate(nextProps, nextState).
If it returns true -> React calls render().
If false -> React skips the re-render.

Example with props

javascript

class UserCard extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.user.id !== this.props.user.id; // compare by id
  }

  render() {
    console.log('render');
    return <div>{this.props.user.name}</div>;
  }
}

If the parent passes a new object user every time but with the same id, and shouldComponentUpdate returns false, React will not re-render the component.

Important to remember

The method must be pure - no side effects, no state changes.
Not called on mount, only on updates.
React ignores it if PureComponent is used (which already implements "shallow comparison").

The equivalent in functional components

In functional components, shouldComponentUpdate does not exist directly. But its behavior can be recreated through:

`React.memo()`

javascript

const UserCard = React.memo(function UserCard({ user }) {
  console.log('render');
  return <div>{user.name}</div>;
});

React.memo does the same thing - it shallowly compares old and new props. If they are equal, it does not call the component again.

Custom comparison (the equivalent of `shouldComponentUpdate`)

javascript

const UserCard = React.memo(
  function UserCard({ user }) {
    console.log('render');
    return <div>{user.name}</div>;
  },
  (prevProps, nextProps) => prevProps.user.id === nextProps.user.id
);

Here the second argument (areEqual) is inverted logic compared to shouldComponentUpdate: if areEqual() returns true, the component does not update.

Typical use cases

Goal	Example
Performance optimization	Avoid unnecessary re-renders when unchanged data is passed
Update control	Update the component only when a specific field changes
Prop comparison	Implement a deep or targeted comparison of data

Comparison with other optimizations

Approach	Where it's used	What it does
`shouldComponentUpdate()`	Class components	Full control, manual
`React.PureComponent`	Class components	Built-in shallow comparison
`React.memo()`	Functional components	The equivalent of `PureComponent`
`useMemo()` / `useCallback()`	Functional components	Memoizes values and functions so references do not change and do not trigger updates

Summary

shouldComponentUpdate() lets you manually control whether React should re-render a component when props or state change.

If you return false -> React skips render and commit, saves resources, and improves performance.

Short Answer

Interview ready

Premium

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