Какие плюсы и минусы декомпозиции компонента в React?

Компоненты

Декомпозиция — разбиение крупного компонента на несколько мелких. Инструмент мощный, но у него есть и обратная сторона.

Плюсы

Читаемость: JSX страницы читается как оглавление (<Filters/>, <ResultsTable/>, <Pagination/>), а не как простыня на 400 строк.
Переиспользование: выделенные части живут в других экранах и в UI-ките.
Изоляция: у каждого куска свой state и своя ответственность; баг ищется в границах компонента.
Производительность: локальный state внутри маленького компонента не перерисовывает всю страницу; мелкие компоненты можно точечно мемоизировать.
Тестируемость и параллельная работа: маленький компонент проверяется на входе/выходе; разные разработчики не конфликтуют в git.

Минусы

Дробление ради дробления: десятки однострочных компонентов — навигация по файлам тяжелее, чем чтение одного цельного куска.
Prop drilling: разрезали слишком глубоко — данные приходится тянуть через уровни; появляется контекст там, где хватало локальности.
Косвенность: чтобы понять поведение, приходится прыгать по пяти файлам.
Преждевременная абстракция: компонент, выделенный «на будущее» с пятью пропсами-настройками, потом переписывается под реальные требования.
Небольшой оверхед на рендер (больше узлов в дереве) — обычно незначим.

Как проводить границы

По ответственности (компонент делает одну вещь), по владению состоянием (у части есть своё состояние), по повторяемости (встретилось дважды). Не выделять то, что используется один раз и не имеет своей логики, только ради «красоты».

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

Плюсы декомпозиции: читаемость, переиспользование, изоляция состояния и багов, точечные ререндеры, тестируемость, параллельная работа. Минусы: микродробление и косвенность, prop drilling, преждевременные абстракции. Границы — по ответственности, владению состоянием и реальной повторяемости.