mediumPerformanceReact

The render storm

A developer asked an AI assistant to display sorted, filtered results in a table that re-renders on every keystroke of a search box. The suggested code works fine with a small dataset, but the input starts lagging noticeably once the table holds a few thousand rows.

ResultsTable.jsx

function ResultsTable({ items, searchTerm }) {
  const filtered = items
    .filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase()))
    .sort((a, b) => a.name.localeCompare(b.name));

  return (
    <table>
      {filtered.map((item) => <Row key={item.id} item={item} />)}
    </table>
  );
}

Why does typing in the search box start lagging as the dataset grows?

filter and sort re-run on every render, including renders triggered by unrelated state changes, recomputing the full sort from scratch each time.

React re-mounts every Row component on each render because key is set to item.id.

localeCompare is asynchronous and blocks the main thread until it resolves.

toLowerCase() mutates the original item.name string, causing repeated re-renders.