React Memo Interview Guide

What is React.memo?

React.memo is a Higher Order Component (HOC) that memoizes a functional component and prevents unnecessary re-renders when props have not changed.

const User = React.memo(({ name }) => {
  console.log("Rendered");
  return <h1>{name}</h1>;
});

If name remains the same, React reuses the previous rendered result instead of re-rendering the component.

Why use React.memo?

To improve performance by avoiding unnecessary re-renders of child components when their props haven’t changed.

Without React.memo

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <Child />
    </>
  );
}

Whenever count changes, Child re-renders.

With React.memo

const Child = React.memo(() => {
  console.log("Child Rendered");
  return <h1>Child</h1>;
});

Now Child won’t re-render unless its props change.

How React.memo Works

React.memo performs a shallow comparison of previous and next props.

prevProps === nextProps

Primitive values compare by value:

<User name="John" />

Objects/functions compare by reference:

<User data={{ name: "John" }} />

A new object reference causes a re-render.

flowchart TD
A[Parent Re-renders] --> B{React.memo}
B -->|Props unchanged<br/>shallow equal| C[Skip Child Render]
B -->|Props changed| D[Re-render Child]

Shallow Comparison

React compares references, not deep object contents.

{ a: 1 } === { a: 1 } // false

Why Objects and Arrays Break Memoization

function Parent() {
  const user = { name: "John" };
  return <Child user={user} />;
}

Use useMemo to preserve the reference.

const user = useMemo(() => ({
  name: "John"
}), []);

Why Functions Break Memoization

<Child onClick={() => console.log("Hi")} />

Use useCallback.

const handleClick = useCallback(() => {
  console.log("Hi");
}, []);

React.memo vs useMemo

React.memo	useMemo
Memoizes a component	Memoizes a computed value
Prevents component re-render	Prevents expensive recalculation
HOC	Hook

const Child = React.memo(Component);

const value = useMemo(() => expensiveCalc(), []);

React.memo vs useCallback

React.memo	useCallback
Memoizes component	Memoizes function
Avoids component re-render	Avoids function recreation

const handleClick = useCallback(() => {}, []);
const Child = React.memo(({ onClick }) => {});

State and Context

React.memo does not prevent re-renders caused by:

• Internal state updates
• Context updates

const Child = React.memo(() => {
  const [count, setCount] = useState(0);
});

const theme = useContext(ThemeContext);

Custom Comparison Function

React.memo accepts an optional second argument to customize the props comparison instead of relying on the default shallow check:

const User = React.memo(
  UserComponent,
  (prevProps, nextProps) => {
    return prevProps.id === nextProps.id;
  }
);

• true -> Skip render
• false -> Re-render

When to Use React.memo

Use it when:

• Components render frequently.
• Rendering is expensive.
• Props rarely change.
• Large lists or dashboards.

Avoid it when:

• Components are tiny.
• Props always change.
• No measurable performance issue exists.

Real Example

const Child = React.memo(({ onClick }) => {
  console.log("Child Rendered");
  return <button onClick={onClick}>Click</button>;
});

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("Clicked");
  }, []);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <Child onClick={handleClick} />
    </>
  );
}

Senior Interview Question

Why can React.memo sometimes hurt performance?

React.memo performs prop comparisons on every render. For very small components, the comparison cost may exceed the rendering cost.

const Label = ({ text }) => <span>{text}</span>;

Use React DevTools Profiler before optimizing.

One-Line Interview Answer

React.memo is a Higher Order Component that memoizes a functional component and prevents unnecessary re-renders by performing a shallow comparison of props. It is commonly used with useCallback and useMemo to optimize React application performance.

Key Takeaways

• React.memo memoizes functional components.
• It performs shallow prop comparison.
• Objects and functions require stable references via useMemo and useCallback.
• It does not prevent re-renders caused by state or context updates.
• Apply it only where profiling indicates a performance benefit.