Home React Reference React.memo()

React.memo()

function

Wraps a component to prevent unnecessary re-renders when props have not changed.

Syntax

const MemoizedComponent = React.memo(Component)

Example

javascript

import { memo } from 'react';

const ProductCard = memo(function ProductCard({ name, price }) {
    console.log('Rendering:', name);
    return (
        <div className="card">
            <h3>{name}</h3>
            <p>${price}</p>
        </div>
    );
});

// Only re-renders when name or price prop changes

children prop

Conditional rendering