Что проверяют в блоке React + TypeScript
Здесь смотрят, как ты связываешь поведение React с типовой системой TypeScript:
- где будет ререндер и где его не будет;
- как типизировать props и события;
- как использовать utility types и generics в реальном коде.
Хороший ответ на интервью всегда выглядит как связка: “поведение в рантайме React” + “гарантии типов в TS”.
Rendering и hooks
useState вызывает ререндер при изменении значения.
useRef хранит mutable-значение между рендерами, но сам по себе ререндер не вызывает.
Эту разницу часто спрашивают в формате “почему компонент перерисовался/не перерисовался”.
Еще один частый follow-up: что положить в useEffect dependencies и почему.
Здесь важно объяснять не “чтобы линтер не ругался”, а причинно-следственную связь
между зависимостями и повторным выполнением эффекта.
React Hooks
Какой хук хранит значение между рендерами и не вызывает ререндер при изменении?
Utility types на практике
На интервью полезно объяснять utility types через задачу, а не через определения:
Partial<T>— когда форма заполняется по шагам;Pick<T, K>— когда нужен только subset полей для UI;Omit<T, K>— когда нужно убрать приватные поля перед отдачей в компонент.
На собеседовании сильно помогает объяснение через конкретный кейс:
например, Pick<User, "id" | "name"> для карточки списка пользователей.
TypeScript utility types
Сопоставь utility type и его назначение.
Термины
Partial<T>
Pick<T, K>
Omit<T, K>
Определения (drag-and-drop)
Generics и устойчивые API
Generic помогает не терять информацию о типе между аргументом и результатом функции. Это основа для reusable-хелперов и typed hooks.
function identity<T>(value: T): T {
return value;
}
Важно уметь объяснить не только синтаксис, но и пользу:
один и тот же код работает для разных типов без any.
Практический паттерн:
- generic helper для API-ответов;
- generic custom hook для таблиц/списков;
- type narrowing внутри условий для безопасной ветвизации.
Generics в TypeScript
Заполни пропуски в generic-функции.
function identity<>(value: ): { return value; }
Controlled vs uncontrolled и типизация событий
Если спрашивают про формы, лучше сразу показать различие:
- controlled: значение хранится в state, UI и state синхронизированы;
- uncontrolled: значение хранит DOM, состояние читается по ref.
Для TS важно корректно типизировать обработчики:
React.ChangeEvent<HTMLInputElement>, React.FormEvent<HTMLFormElement> и т.д.
Такой ответ показывает и знание React API, и аккуратность в типовой модели.
Мини-итог
К концу этого блока ты должен уверенно проговаривать:
- когда React делает ререндер;
- как типизировать публичный API компонента;
- как и зачем использовать generics и utility types в проекте.
- чем controlled-подход отличается от uncontrolled в реальной форме.