What is React.memo, and how does it help with performance optimization?

Learn how React.memo prevents unnecessary re-renders and improves performance in React apps.

intermediatePerformance optimizationreact memoperformance optimizationpure components
Published: 10/26/2025
Updated: 10/26/2025

React.memo memoizes functional components to prevent re-renders when props haven’t changed.


⚙️ Example

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

âś… If the parent re-renders but props are the same, React skips rendering this component.

Use it wisely—overusing React.memo can hurt performance.


Stay Updated

Get the latest frontend challenges, interview questions and tutorials delivered to your inbox.