Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import React, { useState, useCallback, useMemo } from 'react';

// ── Memoised child ─────────────────────────────────────────────────────────
const UserCard = React.memo(function UserCard({ user, onSelect }) {
    console.log(`Rendering UserCard for ${user.name}`);
    return (
        <div onClick={() => onSelect(user.id)}>
            <strong>{user.name}</strong> — {user.email}
        </div>
    );
});

// ── Custom comparator (compare by id only) ──────────────────────────────────
const HeavyRow = React.memo(
    function HeavyRow({ item }) {
        return <li>{item.label}</li>;
    },
    (prev, next) => prev.item.id === next.item.id
);

// ── Parent ─────────────────────────────────────────────────────────────────
function UserList({ rawUsers, filter }) {
    const [selectedId, setSelectedId] = useState(null);

const users = useMemo(
        () => rawUsers.filter(u => u.name.includes(filter)),
        [rawUsers, filter]
    );

const handleSelect = useCallback(id => setSelectedId(id), []);

return (
        <ul>
            {users.map(u => (
                <UserCard key={u.id} user={u} onSelect={handleSelect} />
            ))}
            {selectedId && <p>Selected: {selectedId}</p>}
        </ul>
    );
}