Question 1

Яка правильна синтаксис для типізації props компонента React?

Accepted Answer

Інтерфейс Props з подальшою типізацією функції з Props як параметром є рекомендованим стандартним синтаксисом. Цей підхід забезпечує відмінний висновок типів та дозволяє легко перевикористовувати тип Props в інших місцях коду. Він більш явний ніж React.FC та забезпечує кращий контроль над типізацією children.

Question 2

Як правильно типізувати простий state з useState?

Accepted Answer

TypeScript автоматично виводить тип state із початкового значення, переданого до useState. Для простого значення на кшталт string немає необхідності явно вказувати узагальнений тип. Автоматичний висновок достатній і робить код більш лаконічним. Явна типізація стає корисною лише для union-типів або коли початкове значення є null.

Question 3

Який правильний тип для події onClick на кнопці?

Accepted Answer

React.MouseEvent<HTMLButtonElement> є специфічним типом для подій кліку на кнопці. Узагальнений параметр HTMLButtonElement вказує відповідний DOM-елемент, що дозволяє отримати доступ до специфічних властивостей кнопки через event.currentTarget. Використання нативного DOM MouseEvent або занадто загального типу призвело б до втрати цієї точності типізації.

TypeScript з React

Яка правильна синтаксис для типізації props компонента React?

Відповідь

Як правильно типізувати простий state з useState?

Відповідь

Який правильний тип для події onClick на кнопці?

Відповідь

Який тип використовувати для типізації children компонента-обгортки?

Яка основна різниця між React.FC та прямою типізацією?

Інші теми співбесід React / Next.js

Основи JavaScript

Основи React

React Hooks

Життєвий цикл компонента

React Router

Управління станом з Context

Форми та Controlled Components

Отримання даних та API

React Query (TanStack Query)

Styling & CSS-in-JS

Основи Next.js

Data Fetching у Next.js

Server Actions у Next.js

Маршрутизація та Навігація в Next.js

API Routes у Next.js

Metadata & SEO у Next.js

Middleware та Auth у Next.js

Тестування React

Zustand State Management

Оптимізація продуктивності React

Error Boundaries & обробка помилок

Advanced React Patterns

Розширені можливості Next.js

Розгортання та Продакшн Next.js

Architecture & Design Patterns

React Server Components

Інтернаціоналізація Next.js

React Безпека & Найкращі Практики

Опануй React / Next.js для наступної співбесіди