Question 1

Що таке React і які проблеми він вирішує?

Accepted Answer

1) React — бібліотека для UI. 2) Вирішує проблему декларативного опису інтерфейсу. 3) UI = функція від стану. 4) Спрощує композицію компонентів. 5) Добре працює з екосистемою (Router, стан, збірка).

Question 2

Чим React відрізняється від фреймворка?

Accepted Answer

1) React — тільки шар UI. 2) Роутинг/дані/архітектура вибираються окремо. 3) Framework (Next/Remix) задає більше правил. 4) React гнучкіший, але вимагає рішень. 5) На великих проектах частіше беруть фреймворк.

Question 3

Що таке JSX і як він працює?

Accepted Answer

1) JSX — синтаксис, схожий на HTML у JS. 2) Компілюється у виклики React.createElement. 3) Всередині можна писати вирази {expr}. 4) Атрибути — props. 5) Обов’язково один кореневий елемент (або Fragment).

Question 4

Навіщо потрібен ключ key у списках?

Accepted Answer

1) key допомагає React зіставляти елементи між рендерами. 2) Прискорює diff і зменшує баги. 3) key має бути стабільним, не індексом (якщо список змінюється). 4) Краще використовувати id з даних. 5) Неправильний key призводить до 'стрибаючого' стану.

Question 5

Що таке компонент і які види компонентів бувають?

Accepted Answer

1) Компонент — функція/клас, що повертає UI. 2) Функціональні компоненти — стандарт сьогодні. 3) Класові зустрічаються в legacy. 4) Компоненти бувають 'контейнери' і 'презентаційні'. 5) Композиція важливіша за наслідування.

Question 6

Що таке props і як їх правильно використовувати?

Accepted Answer

1) props — вхідні дані компонента. 2) props незмінні (read-only). 3) Для зміни поведінки передавай колбэки. 4) Зроби props мінімальними і зрозумілими. 5) Використовуй default значення через параметри функції.

Question 7

Що таке state і коли він потрібен?

Accepted Answer

1) state — внутрішній стан компонента. 2) Використовуй для даних, що змінюються з часом. 3) Тримай state якомога ближче до місця використання. 4) Не дублюй обчислювані дані в state. 5) Для спільного стану — піднімай вгору або використовуй store.

Question 8

Як працює useState і чому setState асинхронний?

Accepted Answer

1) useState повертає значення і сеттер. 2) setState планує оновлення і повторний рендер. 3) Оновлення можуть батчитися. 4) Для залежності від попереднього значення використовуй функцію: setX(prev => ...). 5) Не розраховуй на миттєву зміну після setState.

Question 9

Як оновлювати об'єкти і масиви в state без мутацій?

Accepted Answer

1) Не мутуй state напряму. 2) Об'єкт: setS(prev => ({ ...prev, a: 1 })). 3) Масив: setA(prev => [...prev, item]). 4) Для видалення: filter. 5) Для складних структур можна використовувати immer.

Question 10

Що таке derived state і чому він шкідливий?

Accepted Answer

1) Derived state — коли state дублює обчислюване значення. 2) Це призводить до розсинхронізації. 3) Краще обчислювати через useMemo або прямо у рендері. 4) Тримай джерело істини один раз. 5) Виняток — коли потрібно 'зафіксувати' значення у часі.

Question 11

Що таке lifting state up і коли його робити?

Accepted Answer

1) Це перенесення state у спільного батька. 2) Потрібно, коли кільком компонентам потрібен один джерело істини. 3) Батько тримає state і передає props вниз. 4) Дочірні викликають колбэки для змін. 5) Альтернатива — context/store, якщо дерево велике.

Question 12

Як працює useEffect і для чого він потрібен?

Accepted Answer

1) useEffect виконує side effects після рендеру. 2) Підходить для підписок, запитів, роботи з DOM. 3) Залежності задаються масивом deps. 4) Повернення функції — cleanup. 5) Не використовуйте useEffect для обчислення derived state.

Question 13

Як правильно задавати залежності useEffect?

Accepted Answer

1) Вказуй усі значення, що використовуються всередині ефекту. 2) Не відключай eslint правило без причини. 3) Для функцій використовуй useCallback. 4) Для об'єктів — useMemo. 5) Якщо ефект занадто 'шумний' — переглянь архітектуру.

Question 14

Чим відрізняється useEffect від useLayoutEffect?

Accepted Answer

1) useEffect запускається після відрисовки браузером. 2) useLayoutEffect — синхронно після мутацій DOM, до фарбування. 3) useLayoutEffect може блокувати рендер. 4) Використовуй його для вимірювань/мигання UI. 5) У більшості випадків достатньо useEffect.

Question 15

Чому не можна викликати хуки умовно?

Accepted Answer

1) React покладається на порядок виклику хуків. 2) Умовний виклик порушує порядок. 3) Це призводить до багів і неправильного стану. 4) Правило: хуки тільки на верхньому рівні компонента. 5) Винось умову всередину хука/ефекту.

Question 16

Що таке useMemo і коли він корисний?

Accepted Answer

1) useMemo кешує результат обчислення. 2) Потрібен для дорогих обчислень або стабільних посилань. 3) Не замінює оптимізацію рендерингу скрізь. 4) Слідкуй за deps, інакше буде застарілим. 5) Часто корисний перед передачею в memo/ефекти.

Question 17

Що таке useCallback і чим він відрізняється від useMemo?

Accepted Answer

1) useCallback кешує функцію. 2) useMemo кешує значення. 3) useCallback(fn, deps) ~= useMemo(() => fn, deps). 4) Корисно для передачі колбеків у memo-компоненти. 5) Не застосовуй без потреби: це теж накладні витрати.

Question 18

Коли memo дійсно допомагає, а коли ні?

Accepted Answer

1) memo корисний, якщо компонент часто ререндериться з тими ж props. 2) Якщо props змінюються завжди (нові об'єкти) — користі мало. 3) Оптимізація вимагає вимірювань (профілюй). 4) memo збільшує складність. 5) Спершу оптимізуй архітектуру і стан.

Question 19

Що таке React.memo і як він працює?

Accepted Answer

1) Обгортає компонент і пропускає ререндер, якщо props не змінилися (shallow). 2) Порівняння поверхневе. 3) Можна передати кастомну функцію порівняння. 4) Стабілізуй props (useMemo/useCallback). 5) Не забувай про контекст: він все одно викличе ререндер.

Question 20

Чому небезпечно оптимізувати React 'на око'?

Accepted Answer

1) Часто проблема не там, де здається. 2) useMemo/useCallback можуть погіршити. 3) Потрібен профайлер React DevTools. 4) Вимірюй до/після. 5) Оптимізація має бути обґрунтованою.

Question 21

Що таке reconciliation (узгодження) в React?

Accepted Answer

1) Це алгоритм порівняння старого і нового дерева. 2) React намагається мінімізувати зміни DOM. 3) key у списках впливає на reconciliation. 4) Зміна типу компонента => демонтаж/монтування. 5) Структура дерева важлива для продуктивності.

Question 22

Що таке virtual DOM і чому це не 'магія'?

Accepted Answer

1) Virtual DOM — об'єктне представлення UI. 2) React порівнює дерева і застосовує патчі. 3) Перемога не в швидкості, а в зручності декларативного UI. 4) Реальна вартість — рендер і порівняння. 5) Правильне управління станом важливіше.

Question 23

Чому компонент ререндериться і як це зрозуміти?

Accepted Answer

1) Ререндер через зміну state/props/context. 2) Батьківський ререндер не завжди = оновлення DOM. 3) Використовуй React DevTools Profiler. 4) Для відлагодження можна тимчасово додати лог. 5) Перевіряй стабільність props і селектори стану.

Question 24

Що таке controlled components (контрольовані форми)?

Accepted Answer

1) Поле вводу керується станом. 2) value і onChange зв'язують UI і дані. 3) Дає валідацію і контроль. 4) Може бути повільніше на великих формах. 5) Альтернатива — uncontrolled + refs/форми і бібліотеки.

Question 25

Як зробити uncontrolled input і коли це виправдано?

Accepted Answer

1) Використовуй defaultValue замість value. 2) Читай значення через ref при submit. 3) Підходить для великих форм, де важлива продуктивність. 4) Валідацію роби на submit/blur. 5) React Hook Form часто використовує цей підхід.

Question 26

Як правильно обробляти події в React?

Accepted Answer

1) Події — SyntheticEvent (у більшості випадків). 2) Використовуй onClick/onChange і т.п. 3) Не викликай обробник одразу: onClick={() => ...}. 4) Для продуктивності винеси обробник у функцію. 5) Пам’ятай про вспливання і stopPropagation.

Question 27

Чим SyntheticEvent відрізняється від нативних подій?

Accepted Answer

1) Це обгортка над нативною подією. 2) Забезпечує єдине API у різних браузерах. 3) У старих версіях був pooling, зараз менше проблем. 4) event.nativeEvent дає нативну подію. 5) Зазвичай достатньо SyntheticEvent.

Question 28

Як правильно працювати з refs і коли вони потрібні?

Accepted Answer

1) refs дають доступ до DOM/інстансу. 2) Потрібні для фокусу, вимірів, інтеграції з бібліотеками. 3) Не використовуй refs для даних замість state. 4) useRef зберігає mutable значення без рендеру. 5) Для прокидання ref використовуй forwardRef.

Question 29

Що таке forwardRef і коли він потрібен?

Accepted Answer

1) forwardRef дозволяє передати ref всередину компонента. 2) Потрібен для компонентних бібліотек. 3) Спрощує фокусування і інтеграції. 4) Намагайся не протікати DOM-деталями без потреби. 5) Типізуй ref у TS явно.

Question 30

Що таке useImperativeHandle і чи варто його використовувати?

Accepted Answer

1) Дозволяє кастомізувати API ref. 2) Корисно для контролів (focus, reset). 3) Це імперативний шлях, використовуй рідко. 4) Надавай перевагу декларативним props. 5) Якщо використовуєш — документуй методи.

Question 31

Що таке Context API і які у нього обмеження?

Accepted Answer

1) Context передає дані крізь дерево без props. 2) Добре для теми, локалі, auth. 3) Часті зміни context можуть ререндерити багато компонентів. 4) Використовуй розділення контекстів і memo. 5) Для складних кейсів краще store з селекторами.

Question 32

Як уникнути зайвих ререндерів через Context?

Accepted Answer

1) Робіть кілька контекстів замість одного великого. 2) Передавайте примітиви або мемоізовані об’єкти. 3) Обгорніть провайдери ближче до споживачів. 4) Винось логіку у store/селекції. 5) Перевіряй профайлером.

Question 33

Що таке custom hooks і навіщо вони потрібні?

Accepted Answer

1) Це функції, які використовують хуки і переиспользують логіку. 2) Спрощують композицію поведінки. 3) Роблять компоненти тонкими. 4) Назва має починатися з use. 5) Внутрішньо дотримуйся правил хуків.

Question 34

Як проектувати custom hooks, щоб вони були переиспользовуваними?

Accepted Answer

1) Тримай API мінімальним: входи і виходи. 2) Не прив’язуй хук до конкретного UI. 3) Повертай дані і колбеки. 4) Не приховуй побічні ефекти. 5) Документуй очікування і edge cases.

Question 35

Що таке React Router і які є альтернативи?

Accepted Answer

1) React Router — популярний роутер для SPA. 2) Альтернатива: Next.js routing, Remix routing. 3) Для мобільних: React Navigation. 4) Вибір залежить від SSR/SPA та вимог. 5) У великих проектах важливі data APIs та loaders.

Question 36

Що таке SSR, CSR і SSG (у контексті React)?

Accepted Answer

1) CSR — рендеринг у браузері. 2) SSR — HTML рендериться на сервері. 3) SSG — HTML генерується на етапі збірки. 4) SSR покращує SEO і FCP, але складніше. 5) SSG хороший для контенту, але вимагає регенерації даних.

Question 37

Що таке hydration і які проблеми виникають?

Accepted Answer

1) Hydration — 'оживлення' SSR HTML у браузері. 2) React порівнює розмітку і навішує обробники. 3) Несумісність даних => hydration mismatch. 4) Уникай випадкових значень при першому рендері (Date.now). 5) Розділяй server/client компоненти (у Next).

Question 38

Чому виникає hydration mismatch і як його виправити?

Accepted Answer

1) Різний HTML на сервері і клієнті. 2) Причини: час, випадкові значення, доступ до window, умовні гілки. 3) Використовуй client-only рендер через useEffect або dynamic import. 4) Тримай дані послідовними (prefetch). 5) Перевіряй оточення (typeof window).

Question 39

Як безпечно використовувати window/document у React?

Accepted Answer

1) У SSR window недоступний. 2) Доступ через useEffect або перевіряй typeof window !== 'undefined'. 3) Для розмірів вікна використовуй підписки і cleanup. 4) Для cookies/localStorage враховуй SSR. 5) У Next 13+ використовуй client components.

Question 40

Як працювати з data fetching у React?

Accepted Answer

1) Базово: fetch у effect + state. 2) Важливо: скасування запитів (AbortController). 3) Обробка loading/error. 4) Для кешу/рефетчу краще TanStack Query. 5) У SSR фреймворках використовуй серверні loaders.

Question 41

Як правильно обробляти стан loading/error/empty?

Accepted Answer

1) Показуй skeleton/spinner для loading. 2) Для error — зрозуміле повідомлення + retry. 3) Для empty — окремий UI і CTA. 4) Не змішуй логіку отримання даних і відображення. 5) Тримай стан явним (discriminated union).

Question 42

Як скасовувати запити і уникати race conditions?

Accepted Answer

1) Використовуй AbortController і signal у fetch. 2) У cleanup ефекту викликай abort. 3) Зберігай requestId і ігноруй застарілі відповіді. 4) Використовуй бібліотеки з дедуплікацією запитів. 5) Не викликай setState після unmount.

Question 43

Що таке Suspense і для чого він використовується?

Accepted Answer

1) Suspense дозволяє показувати fallback, поки ресурс не готовий. 2) В основному використовується для lazy і даних у фреймворках. 3) Suspense boundary локалізує завантаження. 4) Не замінює обробку помилок — потрібен Error Boundary. 5) В екосистемі data fetching підтримка залежить від стеку.

Question 44

Як працює React.lazy і code splitting?

Accepted Answer

1) React.lazy завантажує компонент динамічно. 2) Використовуй разом із <Suspense fallback>. 3) Розділяй за роутами/важкими віджетами. 4) Не дроби занадто дрібно — багато чанків шкідливо. 5) У збірнику увімкни аналіз (bundle analyzer).

Question 45

Що таке Error Boundary і навіщо він потрібен?

Accepted Answer

1) Виявляє помилки під час рендерингу/життєвого циклу. 2) Не ловить помилки в async/handlers. 3) Показує fallback UI. 4) Реалізується через класовий компонент або бібліотеку. 5) Додай логування (Sentry) у componentDidCatch.

Question 46

Як робити форми та валідацію у React?

Accepted Answer

1) Маленькі форми можна на useState. 2) Великі — краще React Hook Form. 3) Валідацію роби схемою (zod/yup). 4) Для UX: validate onBlur або debounce. 5) Показуй помилки поруч із полем і в цілому.

Question 47

Що таке React Hook Form і чому його люблять?

Accepted Answer

1) Він мінімізує перерендери. 2) Використовує uncontrolled inputs за замовчуванням. 3) Зручна інтеграція зі схемами. 4) Добре масштабується на великі форми. 5) Менше boilerplate, ніж ручні рішення.

Question 48

Як зробити debounce для пошуку/інпута?

Accepted Answer

1) Використовуй setTimeout/clearTimeout у useEffect. 2) Або бібліотеку lodash.debounce. 3) Зберігай сире значення окремо від застосованого. 4) Враховуй скасування запитів. 5) Не забудь cleanup.

Question 49

Як керувати фокусом і доступністю (a11y) у React?

Accepted Answer

1) Використовуй семантичні елементи (button, label). 2) Керуй фокусом через ref. 3) У модалках роби focus trap. 4) Додавай aria-* тільки коли потрібно. 5) Тестуй клавіатурою і скрінрідером.

Question 50

Як правильно реалізувати модальне вікно?

Accepted Answer

1) Рендери через portal (в кінець body). 2) Закриття по Esc і по кліку на overlay. 3) Блокує прокрутку підложки. 4) Тримай focus trap і повертає фокус. 5) Обробляй accessibility (role='dialog').

Question 51

Що таке Portal і коли він потрібен?

Accepted Answer

1) Portal рендерить дітей у інший DOM-елемент. 2) Потрібен для модалок, тултіпів, випадаючих меню. 3) Уникає проблем з overflow/z-index. 4) Події все одно спливають по React-дереву. 5) Слідкуй за доступністю.

Question 52

Як працює batch updates у React?

Accepted Answer

1) React може об’єднувати кілька setState у один рендер. 2) Це зменшує перерисовки. 3) У React 18 батчинг працює і в async контекстах. 4) Не покладайся на порядок сеттерів без функціональної форми. 5) Для синхронного читання використовуй useEffect після рендеру.

Question 53

Що таке concurrent rendering у React 18?

Accepted Answer

1) Це можливість переривати і продовжувати рендер. 2) Покращує відгук UI. 3) Не означає автоматичне прискорення. 4) Потрібні правильні пріоритети (transitions). 5) При несумісних бібліотеках можливі баги.

Question 54

Що таке useTransition і коли він корисний?

Accepted Answer

1) Дозволяє позначити оновлення як низькоприоритетні. 2) UI залишається відгукливим при важких оновленнях. 3) Повертає isPending для стану UI. 4) Корисно для фільтрів/переключень списку. 5) Не замінює оптимізацію даних.

Question 55

Що таке useDeferredValue і чим він відрізняється від debounce?

Accepted Answer

1) Це відкладене значення для низького пріоритету. 2) Не затримує події, а дозволяє намалювати пізніше. 3) Добре для пошуку по великому списку. 4) Debounce затримує виклик, а deferred — пріоритет рендерингу. 5) Комбінуй усвідомлено.

Question 56

Як правильно писати ключі та ідентифікатори для компонентів?

Accepted Answer

1) key потрібен лише для списків. 2) Використовуй стабільний id з даних. 3) Не використовуй random/Date.now для key. 4) Не використовуй індекс, якщо елементи можуть переставлятися/видалятися. 5) Поганий key зламує збереження локального стану.

Question 57

Як працювати з підняттям обробників подій?

Accepted Answer

1) Обробник зберігається вище, де є state. 2) Дочірній компонент викликає props.onAction(data). 3) Це спрощує тестування. 4) Не передавай занадто багато колбеків — групуй actions. 5) Для складних сценаріїв використовуйте reducer.

Question 58

Що таке useReducer і коли його обирати замість useState?

Accepted Answer

1) useReducer зручний для складного стану. 2) Коли є багато дій і переходів. 3) Спрощує тестування (reducer як чиста функція). 4) Добре поєднується з discriminated unions. 5) Можна використовувати для форм і комплексних UI.

Question 59

Як проектувати reducer: дії та типи?

Accepted Answer

1) Дії як union: { type: 'add', payload: ... } | .... 2) Робіть exhaustive check у switch. 3) Тримайте reducer чистим без side effects. 4) Side effects винесіть у ефекти або middleware (у store). 5) Пишіть тести на кожну дію.

Question 60

Як уникнути prop drilling?

Accepted Answer

1) Піднімайте компоненти ближче один до одного. 2) Використовуйте composition (children) і render props. 3) Використовуйте Context для дійсно глобального. 4) Використовуйте store для складного спільного стану. 5) Не перетворюйте Context у смітник.

Question 61

Що таке children і як використовувати композицію?

Accepted Answer

1) children — це вкладений контент компонента. 2) Дозволяє створювати композицію (Layout, Card). 3) Робить API гнучким. 4) Можна комбінувати з render props. 5) Уникайте занадто складних абстракцій.

Question 62

Що таке render props і коли це корисно?

Accepted Answer

1) Це патерн: пропс — функція, що повертає UI. 2) Дозволяє ділитися логікою. 3) Зараз частіше замінюється хуками. 4) Корисно для компонентів-бібліотек. 5) Слідкуйте за продуктивністю (нова функція кожен рендер).

Question 63

Що таке compound components і де вони застосовуються?

Accepted Answer

1) Це набір зв’язаних компонентів (Tabs, Menu). 2) Загальний стан зберігається у батьківському компоненті. 3) Дочірні читають стан через context. 4) Дає зручний API і композицію. 5) Вимагає уважної типізації і документації.

Question 64

Як типізувати props у React + TypeScript?

Accepted Answer

1) Опишіть type/interface Props. 2) function C(props: Props) {}. 3) Для children: React.ReactNode. 4) Для onClick: (e: React.MouseEvent) => void. 5) Не зловживайте React.FC, якщо не потрібно.

React