Beginner LevelReact JS & React 19
How does React.memo optimize re-rendering of functional components?
❓ Interview Prompt: Explain `React.memo`, props shallow comparison, skipping render passes, and custom comparison functions (`arePropsEqual`).
'React.memo' is a Higher-Order Component that memoizes a functional component. If props have not changed between renders, React skips rendering the component and reuses the last rendered result.
Shallow Comparison:
By default, 'React.memo' performs a shallow comparison of props ('Object.is').
•
Warning: If you pass inline objects, arrays, or non-memoized functions as props, shallow comparison fails, and the child re-renders anyway!
Code Implementation Example
jsx
import { memo } from 'react';
// Component re-renders ONLY if 'title' or 'count' changes
const Header = memo(function Header({ title, count }) {
console.log('Header Rendered');
return <h1>{title}: {count}</h1>;
});
// Custom comparison function
const ExpensiveCard = memo(
function Card({ user }) { return <div>{user.name}</div>; },
(prevProps, nextProps) => prevProps.user.id === nextProps.user.id // Custom shallow check
);💡Preventing unnecessary re-renders using React.memo with shallow prop comparison.
🎯 Interview Key Takeaway
Wrap functional components in React.memo to skip re-rendering when props remain unchanged.
#React.memo#Memoization#Performance#Beginner
Back to all React JS & React 19 Questions→