What is React.memo?
Learn what React.memo is, how shallow prop comparison skips re-renders, when to use custom comparators, and how it pairs with useMemo and useCallback.
Expected Interview Answer
React.memo is a higher-order component that memoizes a functional component, skipping its re-render when its props have not changed since the last render.
When a parent re-renders, React normally re-renders all children. Wrapping a child in React.memo makes React shallowly compare the new props against the previous ones; if they are equal, React reuses the last rendered output instead of running the component again. You can pass a custom comparison function as the second argument to control equality precisely, which is useful for objects or arrays.
- Skips unnecessary re-renders of pure components
- Improves performance for expensive render logic
- Works with a custom equality function
- Keeps output stable when props are unchanged
- Pairs well with useMemo and useCallback for stable props
AI Mentor Explanation
Think of a third umpire who only reviews a delivery when something actually changes on the replay. If the incoming frames look identical to what was already judged, the umpire reuses the earlier decision instead of re-analysing the whole ball. React.memo behaves the same way — unchanged props mean the last verdict stands and no fresh work is done.
Step-by-Step Explanation
Step 1
Identify a pure component
Find a functional component whose output depends only on its props and that re-renders needlessly when the parent updates.
Step 2
Wrap it in React.memo
Export the component wrapped as React.memo(Component) so React can compare props between renders.
Step 3
Understand shallow comparison
By default React.memo does a shallow prop comparison, so primitives compare by value but objects and functions compare by reference.
Step 4
Stabilise reference props
Use useMemo and useCallback in the parent so object and function props keep the same reference when data is unchanged.
Step 5
Add a custom comparator if needed
Pass a second function (prevProps, nextProps) => boolean to define custom equality for complex props.
What Interviewer Expects
- Knowing React.memo is a higher-order component for functional components
- Understanding shallow prop comparison and its limits
- Awareness of when memoization helps versus adds overhead
- Combining it with useMemo and useCallback for stable props
- Knowing the custom comparison function signature
Common Mistakes
- Wrapping every component in React.memo, adding comparison overhead with no benefit
- Passing inline objects or functions as props, which break shallow equality
- Confusing React.memo with the useMemo hook
- Expecting deep comparison by default
- Using it on components whose props change on every render anyway
Best Answer (HR Friendly)
“React.memo is a tool that lets a component skip re-drawing itself when nothing it depends on has changed. It remembers the last result and reuses it, which makes the app faster by avoiding wasted work.”
Code Example
import React from 'react'
const UserCard = React.memo(function UserCard({ name, role }) {
console.log('rendering', name)
return (
<div className="card">
<h3>{name}</h3>
<p>{role}</p>
</div>
)
})
export default UserCardconst areEqual = (prev, next) => prev.user.id === next.user.id
const Profile = React.memo(function Profile({ user }) {
return <span>{user.name}</span>
}, areEqual)
export default ProfileFollow-up Questions
- How does React.memo differ from the useMemo hook?
- Why can passing an inline function as a prop defeat React.memo?
- When would you supply a custom comparison function?
- How do useCallback and useMemo help React.memo work effectively?
- Does React.memo do a shallow or deep comparison by default?
MCQ Practice
1. What does React.memo do by default when props are unchanged?
React.memo memoizes the component and reuses its previous render when a shallow comparison finds props unchanged.
2. By default, how does React.memo compare props?
React.memo performs a shallow comparison of each prop unless you provide a custom comparison function.
3. Which pairing helps keep object/function props stable for React.memo?
useMemo memoizes values and useCallback memoizes functions, keeping their references stable so shallow comparison sees them as unchanged.
Flash Cards
What is React.memo? — A higher-order component that memoizes a functional component and skips re-rendering when its props are unchanged.
Default comparison in React.memo? — A shallow comparison of props — primitives by value, objects and functions by reference.
How to customise equality? — Pass a second argument function (prevProps, nextProps) => boolean returning true when props are considered equal.
Why do inline props break React.memo? — Inline objects/functions get a new reference each render, so shallow comparison always sees them as changed.