Prop comparison

Learn that React.memo does a shallow compare.

Prop comparison

React.memo by default does a shallow comparison across all props. Object.is(prev, next) is called for each prop; if all are equal, render is skipped.

Shallow comparison: primitives (number, string, boolean) by value; objects and arrays by reference. { '{ a: 1 }' } and { '{ a: 1 }' } are different references, not equal.

That's why useCallback and useMemo matter: when passing props to a child, they keep the reference stable. Without stabilization, React.memo always re-renders.

Object prop pitfall

If you pass an object prop like style={ '{ color: "red" }' } to a child, a new object is born on every render. React.memo detects this and re-renders the child.

The fix: wrap the object with useMemo or move it to module scope. const style = useMemo(() => ({ '{ color: "red" }' }), []); gives a stable reference.

Alternative: move constant objects outside the component. const RED_STYLE = { '{ color: "red" }' }; defined once at module scope; same reference in every render. This is the cleanest solution.

Exercise UserCard memo

Complete the skeleton. Write a component called UserCard; take ({ '{ user, onSelect }' }) and return <li onClick={ '{ onSelect }' }>{ '{ user.name }' }</li>. Then wrap with const MemoUserCard = memo(UserCard);. Export MemoUserCard.

Show example solution

import { memo } from "react";

function UserCard({ user, onSelect }) {
  return <li onClick={onSelect}>{user.name}</li>;
}

const MemoUserCard = memo(UserCard);

export default MemoUserCard;

Test yourself

When are two objects equal in shallow compare?
- When contents equal
- Never
- When same reference
- Always
Show answer

When same reference — Equal when same reference.

useCallback's role

When passing a function prop to a React.memo child, use ____.

Show answer

When passing a function prop to a React.memo child, use useCallback.

Match the prop comparison steps

shallow

default
Object.is

compare
useCallback

function
useMemo

object

Next lesson: Custom comparator

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies