Как понять что компонент самодостаточен?
Компоненты
Самодостаточный компонент — тот, который можно взять и вставить в другое место (или другой проект), и он будет работать, не требуя знаний о своём окружении.
Признаки самодостаточности
Явный контракт. Всё, что нужно, приходит через props (или provider-обёртку, поставляемую вместе с ним). Нет скрытых зависимостей от глобальных переменных, конкретного стора, роутера или структуры данных родителя.
Отсутствие внешних предположений. Не полагается на CSS родителя (собственные стили изолированы), не лезет в DOM за своими границами (document.querySelector), не зависит от порядка соседей.
Инкапсуляция состояния. Внутреннее состояние (открыт/закрыт, hover) живёт внутри; наружу — только события через колбэки.
Управляет своим жизненным циклом. Подписки, таймеры, соединения создаются и убираются в собственных эффектах — cleanup гарантирован.
Обрабатывает свои краевые случаи. Пустые данные, ошибка, загрузка — предусмотрены; сломанные props не рушат приложение.
Практическая проверка
- Рендерится в изолированном тесте (RTL) или в Storybook без моков половины приложения?
- Можно ли поставить два экземпляра на страницу — не конфликтуют (id через useId, стили не глобальные)?
- Не появляются ли в его коде импорты из бизнес-модулей (стора, api конкретной фичи)?
- Легко ли вынести его в UI-кит без правок?
Если для рендера нужно завернуть компонент в пять провайдеров и подготовить стор — он не самодостаточен, а привязан к контексту приложения (что нормально для «умных» компонентов, но не для UI-кита).
Коротко для собеседования
Самодостаточный компонент: всё нужное приходит через props, нет скрытых зависимостей от стора/роутера/глобального CSS, своё состояние инкапсулировано, подписки чистятся в собственных эффектах, краевые случаи обработаны. Проверка — рендерится в Storybook/тесте без моков окружения и переносится в другой проект без правок.