Suggest an edit

Improve this article

Refine the answer for “What does shouldComponentUpdate() do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts579 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.