import { memo, useMemo } from 'react';
type Row = { id: number; score: number };
const ScoreRow = memo(function ScoreRow({row}:{row:Row}) { return <li>{row.id}: {row.score}</li>; });
export default function ScoreList({rows}:{rows:Row[]}) {
  const sorted = useMemo(() => [...rows].sort((a,b)=>b.score-a.score), [rows]);
  return <ul>{sorted.map(row => <ScoreRow key={row.id} row={row}/>)}</ul>;
}