Капстоун I: инвентаризация паттерн-смеллов

Смелл первый — божественный компонент: один компонент, владеющий множеством несвязанных обязанностей, поэтому у него много причин меняться и один гигантский рендер. Ищи единственный компонент, который грузит данные, фильтрует, сортирует, пагинирует, держит выбор и рендерит. Это не «большой компонент», это магнит связанности: любое изменение состояния перерисовывает всё это целиком, а любое изменение фичи рискует всем этим.

// smell: Dashboard owns 7 concerns and ~500 lines
function Dashboard() {
  const [data, setData] = useState<Row[]>([]);
  const [query, setQuery] = useState("");
  const [sortKey, setSortKey] = useState<keyof Row>("name");
  const [page, setPage] = useState(0);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  // ...fetch effect, filter, sort, paginate, render table + toolbar + detail
}

Локализуй точно: метрика — «сколько обязанностей во владении». Здесь семь. Семейство исправлений — композиция + кастомные хуки, но ты его пока не применяешь — ты его фиксируешь.

Смелл второй — проброс пропсов: передача данных через компоненты, которые их не используют, лишь бы дотянуться до глубокого потребителя. Проследи за одним пропсом. Если onSelect или currentUser объявлен в Dashboard, принят Table, проброшен TableBody, проброшен Row и используется только в RowActions, то каждый промежуточный компонент связан изменением с пропсом, до которого ему нет дела, — и перерисовывается, когда тот меняется.

// smell: onSelect threaded through 4 components that don't use it
<Table onSelect={onSelect}>          {/* passes down */}
  <TableBody onSelect={onSelect}>    {/* passes down */}
    <Row onSelect={onSelect}>        {/* passes down */}
      <RowActions onSelect={onSelect} /> {/* finally uses it */}

Семейство исправлений — контекст или композиция (подними разметку так, чтобы потребитель стал прямым потомком). Зафиксируй глубину: здесь четыре прыжка. Глубина проброса — твой сигнал стоимости изменения.

Смелл третий — состояние, выведенное эффектом: эффект, который копирует или вычисляет один кусок состояния из другого, создавая скрытый баг устаревания. Это смелл наивысшей серьёзности, потому что он не просто медленный, он неверный. Эффект, записывающий filtered из data + query, выполняется после рендера, поэтому есть кадр, где filtered устарел, а любая пропущенная зависимость делает его устаревшим навсегда.

// smell: derived state via effect — stale by a frame, fragile by deps
const [filtered, setFiltered] = useState<Row[]>([]);
useEffect(() => {
  setFiltered(data.filter((r) => r.name.includes(query)));
}, [data, query]); // forget one dep → permanently stale

Исправление — вывести во время рендера (const filtered = data.filter(...)), без эффекта, без второго состояния. Ранжируй это ближе к верху: это баг корректности, а не производительности.

Смелл четвёртый — толстый контекст: один контекст, держащий множество несвязанных значений, поэтому каждый потребитель перерисовывается, когда меняется любое одно значение. DashboardContext, связывающий query, selectedId, theme и data, означает, что компонент, читающий только theme, перерисовывается на каждое нажатие клавиши, меняющее query. Обновления контекста — всё-или-ничего на значение провайдера.

// smell: unrelated values in one context → keystroke re-renders theme consumers
const DashboardContext = createContext<{
  query: string; selectedId: string | null; theme: Theme; data: Row[];
} | null>(null);

Семейство исправлений — разделить контексты (или вынести изменчивое состояние из контекста вовсе). Зафиксируй число потребителей и частоту обновлений: это произведение — твоя оценка лишних рендеров.

Смелл пятый — ключи по индексу на переупорядочиваемом списке: key={i} привязывает идентичность React к позиции, а не к элементу, поэтому переупорядочивание или удаление портит состояние строк. Это скрытый баг, а не просто предупреждение линтера: когда строки несут локальное состояние (открытый/закрытый детальный блок, черновик ввода), ключи по индексу заставляют это состояние следовать за слотом, а не за строкой.

// smell: key is the index, but rows reorder and carry open/closed state
{rows.map((row, i) => <RowDetail key={i} row={row} />)} // delete row 0 → row 1's state shows on row 0

Исправление — стабильный ключ по id (key={row.id}). Серьёзность зависит от того, переупорядочивается ли список и держат ли строки состояние, — здесь верно и то, и другое, так что это настоящий баг, а не придирка. Зафиксируй этот контекст, а не только строку.