Как разбить большой компонент
Вопрос
Тебе достался компонент на 600 строк. Как будешь его разбирать?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Сначала покрыть текущее поведение тестами или хотя бы чек-листом ручной проверки
Найти разные ответственности: данные, бизнес-логика, разметка, побочные эффекты
Вынести загрузку в хук или query, расчёты в чистые функции с тестами
Разбить разметку на подкомпоненты по смысловым блокам, использовать композицию
Делать маленькими шагами отдельными коммитами или PR, не меняя поведение
Не плодить абстракции заранее, оставлять дубли, которые меняются по разным причинам
Что могут спросить следом
- Как убедиться, что ничего не сломал?
- Как договоришься с командой о таком рефакторинге?
Разбор
Первым делом фиксирую текущее поведение: пишу тесты на ключевые сценарии через Testing Library или хотя бы список ручных проверок. Потом читаю компонент и размечаю ответственности: откуда приходят данные, где бизнес-правила, где побочные эффекты, где разметка. Дальше иду маленькими шагами: выношу загрузку в кастомный хук или TanStack Query, расчёты в чистые функции, на которые легко написать юнит-тесты, а разметку делю на подкомпоненты по смысловым блокам. Каждый шаг отдельный коммит без изменения поведения, чтобы ревьюеру было легко. И слежу, чтобы не переборщить: если два куска похожи, но меняются по разным причинам, я их не объединяю.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.