Как по коду компонента определяешь что он хорошо читается?
Компоненты
Читаемость компонента можно проверить по нескольким конкретным признакам.
Признаки хорошо читаемого компонента
Понятен за 30 секунд. Из имени и первых строк ясно, что он делает; JSX читается как структура UI, а не как простыня.
Одна ответственность. Компонент либо про данные, либо про представление; не смешивает загрузку, бизнес-правила и вёрстку. Логика вынесена в кастомные хуки (const { orders, isLoading } = useOrders()).
Мало «шума» в разметке. Нет вложенных тернарников и длинных &&-цепочек: ранние return для loading/error/empty, условная логика вычислена выше JSX в именованных переменных (const canSubmit = ...).
Осмысленные имена. handleSubmit, isDirty, visibleRows — вместо data2, flag, tmp. Пропсы читаются как контракт; типы вместо комментариев.
Ограниченный размер. Условно: компонент помещается на экран-два; больше — обычно признак пропущенной декомпозиции.
Плоское состояние. Минимум useState, никаких производных данных в state; связанное состояние — в useReducer.
Предсказуемость. Нет побочных эффектов в рендере, нет мутаций props/state, эффекты с честными зависимостями и cleanup.
Тревожные признаки
Пять уровней вложенности JSX, десяток useState подряд, эффекты, триггерящие друг друга, инлайн-функции с телом в 10 строк внутри разметки, комментарии, объясняющие «что» вместо «почему».
Коротко для собеседования
Хорошо читаемый компонент: понятен по имени и первым строкам, имеет одну ответственность (логика в хуках), JSX без вложенных тернарников (ранние return, именованные условия), осмысленные имена и типы, компактный размер, минимум состояния без производных данных, чистый рендер с корректными эффектами.