How to Use React.memo to Prevent Unnecessary Re-renders

In React, when a parent component re-renders, all of its child components re-render by default regardless of whether their props changed. For simple components this is fine, but for complex or frequently updated trees this can cause serious performance problems.

React.memo is a higher order component that wraps your component and memoizes the rendered output. Before re-rendering, React shallowly compares the new props with the previous props. If all props are identical, React skips the re-render entirely and reuses the last rendered result.

To apply React.memo, wrap your component function with it when exporting. Write export default React.memo(YourComponent). The component now only re-renders when at least one of its props has actually changed. The API of the component remains exactly the same from the outside.

React.memo uses shallow comparison, meaning it compares props by reference for objects and functions, not by deep equality. Two objects with identical contents are still considered different if they are different references in memory. This is why primitive props like strings and numbers work well with memo but object and function props need extra care.

If you pass an object as a prop to a memoized component, create that object with useMemo in the parent so its reference stays stable across renders. Without this, a new object literal is created on every parent render, causing the memoized child to re-render anyway because the reference changed.

If you pass a function as a prop to a memoized component, wrap that function with useCallback in the parent. This ensures the function reference does not change between renders unless its dependencies change. React.memo combined with useCallback is a very common and effective optimization pattern.

React.memo accepts an optional second argument which is a custom comparison function. This function receives the previous and next props and returns true if they should be considered equal, meaning skip the re-render, or false if they are different. Use this when shallow comparison is not sufficient for your specific prop structure.

React.memo itself has a cost because it runs the comparison on every render. Apply it only to components that render frequently or are expensive to render, not to every component by default. Use the React DevTools Profiler to identify which components are re-rendering unnecessarily before wrapping them with React.memo.