Custom comparator

Learn to write a custom comparator as the second argument.

Custom comparator

Sometimes shallow comparison isn't enough. For example, when the prop contains a deep object or you want to render only when one field changes. In this case, you give a comparator function as the second argument.

const MemoX = memo(X, (prev, next) => prev.user.id === next.user.id);. If the function returns true, render is skipped; if false, render runs.

This is powerful but dangerous: wrong comparison leads to bugs. Use only when really necessary; shallow comparison + useCallback is usually enough.

Deep compare danger

Some developers do deep comparison with JSON.stringify(prev) === JSON.stringify(next). This is slow; it stringifies the whole object on every render. Big objects cause serious performance loss.

A better method: compare only relevant fields. Like (prev, next) => prev.user.id === next.user.id && prev.theme === next.theme.

The best is to keep prop design simple. Passing primitives instead of deep objects both eases memo and improves readability. This design principle is often recommended in React.

Exercise Custom comparator

Complete the skeleton. Write an Item component; take ({ '{ item }' }) and return <li>{ '{ item.name }' }</li>. Wrap with const MemoItem = memo(Item, (prev, next) => prev.item.id === next.item.id);. Export MemoItem.

Show example solution

import { memo } from "react";

function Item({ item }) {
  return <li>{item.name}</li>;
}

const MemoItem = memo(Item, (prev, next) => prev.item.id === next.item.id);

export default MemoItem;

Test yourself

What does the custom comparator return to skip render?
- null
- false
- undefined
- true
Show answer

true — true skips render.

Comparator params

The comparator takes ____ parameters.

Show answer

The comparator takes prev and next parameters.

Match the custom comparator

prev/next

parameters
true

skip
false

render
field

compare

Next lesson: Summary - React.memo

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies