Какие антипаттерны стараешься не использовать при написании React компонентов?

Антипаттерны React-компонентов удобно разбирать по темам: у каждого есть причина вреда и рабочая замена.

Состояние

• Производные данные в state: filteredItems рядом с items — рассинхрон; вычислять в рендере/useMemo.
• Мутации state: push/присваивание полей — изменения невидимы (Object.is); только иммутабельные обновления.
• Состояние не на своём уровне: всё в корне (каскады ререндеров) или дублирование локального в глобальном сторе. Состояние — максимально близко к использованию.
• Копия пропа в state (useState(props.value)) без синхронизации — компонент «застывает»; либо контролируемый компонент, либо key для сброса.

Компоненты

• Объявление компонента внутри компонента — новый тип каждый рендер, ремоунт поддерева.
• Компонент-бог на 500 строк с данными, логикой и разметкой — дробить, выносить хуки.
• Prop drilling через 5 уровней — композиция/контекст.
• Вызов компонента функцией ({Comp()} вместо <Comp />) — теряется идентичность, ломаются хуки.

Эффекты

• Эффекты для того, что не эффект: вычисления из props/state через effect+setState (лишний цикл), обработка кликов в эффекте (место — обработчик).
• fetch без отмены — гонки; async-эффект; подавление exhaustive-deps.
• Цепочки эффектов, триггерящих друг друга.

Списки и рендеринг

• key по индексу в изменяемых списках; key={Math.random()}.
• Тяжёлая работа в теле рендера без useMemo.
• Тотальная мемоизация «на всякий случай» — тоже антипаттерн (сложность без выгоды).

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

Назвать по паре из каждой группы: производные данные и мутации в state, компонент внутри компонента и компоненты-боги, эффекты вместо вычислений/обработчиков и fetch без отмены, индексные key. И подчеркнуть принцип: минимальный state, чистый рендер, эффекты только для внешнего мира, мемоизация по профайлеру.