Memoization

In React, by default, the framework re-renders the entire subtree when a parent updates, even if the component's props haven't changed. Component-level memoization is achieved using React.memo, a Higher-Order Component (HOC) that acts as a component decorator. It wraps a functional component and skips re-rendering if its props are shallowly equal to the previous ones.

Note: Memoization carries memory overhead for comparison. Use it intentionally, typically when profiling identifies actual performance bottlenecks or when components re-render frequently with identical props.

import { memo } from 'react';

// Wraps the component to skip re-renders if props don't change
export const Card = memo(({ title }) => {
    return (
        <div className="card">
            <h2>{title}</h2>
        </div>
    );
});