Suggest an edit

Improve this article

Refine the answer for “How is React.memo() similar to shouldComponentUpdate()?”. 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)

## The general idea

> Both `React.memo()` and `shouldComponentUpdate()` let you **control whether a component should re-render**
> when its `props` have not changed.

Both exist for **performance optimization** - to avoid **unnecessary re-renders** when a component receives the same data.

---

## `shouldComponentUpdate()` - in class components

This is a lifecycle method that is called **before a re-render**:

```javascript
class User extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // return false → React skips render()
    return nextProps.name !== this.props.name;
  }

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

If the method returns:

- `true` -> React calls `render()` and updates the component;
- `false` -> React **skips the render** and **does not touch the DOM**.

---

## `React.memo()` - in function components

> It is a **HOC (Higher-Order Component)** that does **the same thing** for function components
> that `shouldComponentUpdate` does for class components.

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

By default React.memo does a **shallow comparison** of the props.
If the old and new props are identical (by `Object.is`), the component **will not be re-rendered**.

---

## In other words:

| Component | Mechanism | Control |
|---|---|---|
| Class | `shouldComponentUpdate(nextProps, nextState)` | You return `true` / `false` |
| Function | `React.memo(Component, areEqual?)` | The second argument is a props comparison function |

---

## Custom comparison in `React.memo`

If needed, you can explicitly specify **custom comparison logic** (the equivalent of a hand-written `shouldComponentUpdate`):

```javascript
const User = React.memo(
  function User({ name, age }) {
    console.log('render');
    return <div>{name} ({age})</div>;
  },
  (prevProps, nextProps) => prevProps.age === nextProps.age // If true → do not update
);
```

Here the `areEqual(prevProps, nextProps)` function returns:

- `true` -> do not update (the equivalent of `shouldComponentUpdate = false`);
- `false` -> update (the equivalent of `shouldComponentUpdate = true`).

---

## Direct mapping of the logic

| What it does | Class variant | Function variant |
|---|---|---|
| Checks if the props changed | `shouldComponentUpdate()` | `React.memo()` |
| Shallow comparison by default | No (only through `PureComponent`) | Yes, built into `React.memo()` |
| Custom comparison logic | `shouldComponentUpdate(nextProps, nextState)` | `(prevProps, nextProps) => boolean` |
| Skips the re-render | `return false` | `areEqual() → true` |

---

## Example: equivalent code

### Class component:

```javascript
class Button extends React.Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.label !== this.props.label;
  }

render() {
    console.log('render');
    return <button>{this.props.label}</button>;
  }
}
```

### Function component:

```javascript
const Button = React.memo(
  ({ label }) => {
    console.log('render');
    return <button>{label}</button>;
  },
  (prev, next) => prev.label === next.label
);
```

The behavior is exactly the same.

---

## What is different

| Parameter | `shouldComponentUpdate()` | `React.memo()` |
|---|---|---|
| Applies to | Class components | Function components |
| Control | Inside the component | Outside, at the wrapping level |
| Compares state | Yes (through `nextState`) | No (only props) |
| Can be overridden | Yes | Yes (through `areEqual`) |
| Shallow comparison by default | No (needs `PureComponent`) | Yes |
| Where you write it | Inside the class | Outside: `React.memo(Component)` |

---

## An optimization example

Without optimization:

```javascript
function Parent({ user }) {
  return <Child user={user} />;
}

function Child({ user }) {
  console.log('render');
  return <div>{user.name}</div>;
}
```

Every time a new `user` object appears -> `Child` re-renders.
With `React.memo()`:

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

Now React compares the old and new `user` ->
if the reference is the same, `Child` **does not update**.

---

## Summary

> `React.memo()` ≈ `shouldComponentUpdate()`
> - both exist to **prevent unnecessary re-renders** when the input data (props) has not changed.

| Shared goal | Behavior |
|---|---|
| Improving performance | Skipping a re-render if the data has not changed |
| Shallow comparison by default | Only in `React.memo()` and `PureComponent` |
| Flexibility through a custom comparison | Available in both |
</content>

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.