Question 1

Яка основна різниця між let та var?

Accepted Answer

let оголошує змінну з блоковою областю видимості, тобто вона існує лише в межах блоку, де була визначена (між фігурними дужками). var має функціональну область видимості, що може спричинити неочікувані помилки, оскільки змінна доступна у всій функції. Використання let за замовчуванням запобігає проблемам з hoisting та витоку змінних у циклах або умовних конструкціях.

Question 2

Що таке JSX у React?

Accepted Answer

JSX — це розширення синтаксису JavaScript, яке дозволяє писати розмітку, схожу на HTML, безпосередньо в коді JavaScript. Під час компіляції Babel перетворює його на виклики функції React.createElement. Використання JSX робить код більш читабельним і дозволяє виявляти помилки під час компіляції завдяки типізації, поєднуючи потужність JavaScript зі знайомим синтаксисом.

Question 3

Що таке хук useState в React?

Accepted Answer

useState — це React хук, що керує локальним станом у функціональному компоненті. На відміну від звичайних змінних JavaScript, які скидаються при кожному рендері, useState зберігає значення стану між послідовними рендерами. Цей хук повертає масив, що містить поточне значення стану та функцію для його оновлення, автоматично запускаючи повторний рендер компонента при зміні стану.

Question 4

Що таке mounting у React компоненті?

Accepted Answer

Монтування — це фаза, де компонент створюється та вставляється до DOM вперше. Під час цієї фази React ініціалізує стан, виконує код конструкції та виконує перший рендеринг. Це ідеальний момент для ініціювання API-запитів або ініціалізації підписок через useEffect.

Question 5

Що таке CSS Module у React?

Accepted Answer

CSS Modules автоматично генерують унікальні імена класів, додаючи хеш до імені класу, що запобігає конфліктам стилів між компонентами. Кожен файл CSS Module має власну локальну область видимості, на відміну від традиційних глобальних таблиць стилів. Цей підхід дозволяє писати модульні стилі без ризику випадкового перевизначення в інших компонентах.

Question 6

Що таке App Router у Next.js?

Accepted Answer

App Router — це нова система маршрутизації в Next.js 13+, заснована на директорії app/. Вона замінює Pages Router та вводить Server Components за замовчуванням, спільні layouts та більш гнучку модель маршрутизації з файловими угодами, такими як page.tsx, layout.tsx та loading.tsx.

Question 7

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

Accepted Answer

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

Question 8

Яка основна роль React.memo?

Accepted Answer

React.memo - це Higher-Order Component, який мемоізує результат рендерингу компонента. Він виконує поверхневе порівняння props і пропускає повторний рендеринг, якщо props не змінилися. Особливо корисний для оптимізації витратних дочірніх компонентів, які часто отримують однакові props.

Question 9

Що таке Error Boundary в React?

Accepted Answer

Error Boundary — це класовий компонент React, який перехоплює помилки JavaScript, що виникають у дереві дочірніх компонентів, відображає резервний UI (fallback) і запобігає повному збою додатку. Він використовує методи componentDidCatch() та getDerivedStateFromError() для перехоплення та обробки помилок рендерингу.

Question 10

Що таке патерн Compound Components?

Accepted Answer

Патерн Compound Components дозволяє створювати компоненти, які ділять неявний стан через React Context без явного передавання props. Цей патерн використовується в бібліотеках на кшталт Radix UI та Headless UI для надання гнучкого та компонованого API. Дочірні компоненти можуть автоматично отримувати доступ до спільного стану, дозволяючи налаштовувати структуру без втрати спільної логіки.

Питання зі співбесід з React / Next.js

Готовий до співбесіди з React / Next.js?

Дослідити всі теми React / Next.js

Основи JavaScript

Основи React

React Hooks

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

React Router

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

Форми та Controlled Components

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

React Query (TanStack Query)

Styling & CSS-in-JS

Основи Next.js

TypeScript з React

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 для наступної співбесіди