mediumFrontend

What is `React.memo` and when would you use it?

Q: What is `React.memo` and when would you use it?

**Core concept (TL;DR).** React.memo is a higher-order component that **memoizes** a component: it skips re-rendering when the new props are **shallowly equal** to the previous ones. Use it for components that render often with the **same props** and are non-trivial to render — but only when their props are referentially stable. Parent re-renders; memoized child checks props first Parent re-rende

94 views

Understand the problem

React.memo is a higher-order component that memoizes a functional component, preventing re-renders if its props haven't changed.

performanceoptimizationhocmemoization

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Memoized child skips needless renders

import { memo, useState, useCallback } from "react";

const Child = memo(function Child({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Child button</button>;
});

export default function App() {
  const [count, setCount] = useState(0);
  // stable identity → memo can actually skip Child on count changes
  const onClick = useCallback(() => console.log("clicked"), []);
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <button onClick={() => setCount((c) => c + 1)}>Parent count: {count}</button>
      <Child onClick={onClick} />
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you optimize performance in a React application?

Explain React Suspense and its use cases.