How is React.memo() similar to shouldComponentUpdate()?

ReactMiddle~2 min read

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

Short Answer

Interview ready

Premium

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