Каких антипаттернов избегать при создании таблицы с подкомпонентами?

Таблица с подкомпонентами (строки, ячейки, раскрывающиеся панели) — место, где антипаттерны React бьют больнее всего: всё умножается на количество строк.

Антипаттерны производительности

Компоненты, объявленные внутри рендера:

const Table = ({ rows }) => {
  const Row = ({ row }) => <tr>...</tr>; // ❌ новый ТИП каждый рендер
  // React размонтирует и пересоздаёт все строки при каждом рендере таблицы
};

Подкомпоненты объявлять на верхнем уровне модуля.

key по индексу при сортировке/фильтрации/удалении: состояние строк (чекбоксы, раскрытие, инпуты) «переезжает» к чужим данным. Только стабильные id.

Нестабильные props строк: инлайн-колбэки и объекты (onSelect={() => ...}, style={{...}}) ломают React.memo строк — при вводе в поисковую строку перерисовываются все 500 строк. Лечение: React.memo(Row) + useCallback с id-аргументом (onSelect(row.id) внутри строки) + useMemo для конфигов.

Без виртуализации на больших данных: тысячи смонтированных строк — тормоза независимо от мемоизации; react-window/react-virtuoso или пагинация.

Состояние всех строк в родителе: раскрытие/hover каждой строки в одном объекте state таблицы — любое изменение рендерит всё. Локальный state в строке (или нормализованный стор с точечными подписками).

Антипаттерны структуры

• Невалидная вложенность: <div> внутри <tr> (нужны td/th; группы строк — <React.Fragment key>), текст/пробелы прямо в <table> — React предупреждает про hydration.
• «Таблица-бог»: логика сортировки/фильтрации/выделения в одном компоненте — выносить в хуки (useTableSort) или взять headless-библиотеку (TanStack Table).
• Данные-производные в state (отсортированная копия рядом с исходной) — рассинхрон; вычислять useMemo.

Коротко для собеседования

Не объявлять подкомпоненты в рендере (пересоздание строк), key — только стабильные id (не индексы), мемоизировать строки + стабилизировать их props, виртуализировать большие списки, состояние строки держать в строке, соблюдать валидную структуру table (Fragment для групп) и выносить логику в хуки/TanStack Table.