When a parent re-renders, all of its children re-render by default — even if their props are identical to last time. React.memo wraps a component so React skips the render when the props shallow-compare equal.
const Child = React.memo(function Child({ name }) {
return <p>Hello, {name}</p>;
});
Now <Child name="React" /> only re-runs when name changes — re-renders of the parent don't propagate.
Like useMemo, this is a tool for measured problems. Don't blanket-wrap everything.
Your Task
Build a parent counter and a memoized greeting child:
- Define a memoized component
Greeting that renders <h2 id="greeting">Hello, {name}!</h2>
- In
App, hold a count state
- Render
<Greeting name="React" /> and a <p id="count">Count: {count}</p>
- Button
#bump increments count by 1