Питання на співбесіді з React з відповідями

Приклади запитань

Кілька запитань із кожного рівня з правильною відповіддю й поясненням.

React · Junior

1. Що таке React?

   Правильна відповідь: Бібліотека для побудови інтерфейсів із компонентів

   React відповідає лише за UI: описує інтерфейс як функцію від стану й ефективно оновлює DOM. Роутинг, завантаження даних тощо додають бібліотеками (React Router, TanStack Query) або фреймворками поверх React (Next.js). JSX - це розширення синтаксису JavaScript, а не окрема мова.

2. Що таке віртуальний DOM у React?

   Правильна відповідь: JS-опис UI: React порівнює його з попереднім і змінює в DOM лише різницю

   Під час рендеру компоненти повертають дерево React-елементів - звичайних JS-об'єктів. React порівнює нове дерево з попереднім (reconciliation) і вносить у справжній DOM мінімальні зміни. Це не браузерний API і не копія браузера.

3. На що перетворюється JSX під час збирання?

   Правильна відповідь: На виклики функцій, що створюють React-елементи (jsx())

   <h1 className="t">Hi</h1> компілюється (Babel, SWC, TypeScript) у виклик на кшталт jsx("h1", { className: "t", children: "Hi" }), який повертає об'єкт-опис. Браузер JSX не розуміє, а innerHTML React не використовує - тому рядки в JSX автоматично екрануються.

4. Як правильно задати CSS-клас елементу в JSX?

   Правильна відповідь: <div className="box">

   JSX ближчий до JavaScript, а class - зарезервоване слово, тому атрибути називаються як DOM-властивості: className, htmlFor замість for, tabIndex, onClick. Атрибути data-* і aria-* пишуться як у HTML.

React · Middle

1. Коли React зберігає стан компонента між рендерами?

   Правильна відповідь: Доки той самий тип компонента стоїть на тій самій позиції

   Стан прив'язаний до позиції в дереві UI, а не до змінної. Якщо на тому самому місці рендериться інший тип (<input> замість <textarea>, інший компонент) - піддерево перестворюється, і стан втрачається. Тому не можна оголошувати компоненти всередині інших компонентів: кожен рендер створює новий тип.

2. Як скинути стан форми <EditForm /> під час перемикання на іншого користувача?

   Правильна відповідь: Передати key={userId} - React перестворить компонент

   Новий key каже React, що це інший компонент: старий розмонтується разом зі станом, і змонтується новий. Скидання через ефект працює, але спершу відмалює застарілі дані, а потім виправить їх - зайвий рендер і мерехтіння. forceUpdate є лише в класів і стан не скидає.

3. Що робить React.memo(Component)?

   Правильна відповідь: Пропускає рендер, якщо props поверхнево рівні попереднім

   memo порівнює кожен prop через Object.is. Якщо всі рівні - використовується попередній результат рендеру. Зміни власного стану й контексту однаково спричиняють рендер. Другим аргументом можна передати власну функцію порівняння.

4. Чому memo не допомагає компоненту <List items={data} onSelect={() => select(id)} style={{ gap: 8 }} />?

   Правильна відповідь: Колбек і об'єкт стилю створюються заново за кожного рендеру

   Інлайн-функція й об'єктний літерал - нові посилання на кожному рендері, і поверхневе порівняння їх не пропустить. Їх стабілізують через useCallback / useMemo або виносять константи за межі компонента. React Compiler робить це автоматично.

React · Senior

1. Чим cache() з React корисний у Server Components?

   Правильна відповідь: Дедуплікує виклики функції з тими самими аргументами в межах одного запиту

   const getUser = cache(async (id) => db.user.find(id)) - кілька компонентів в одному серверному рендері можуть викликати getUser(1), а запит до БД виконається один раз. Кеш живе лише в межах запиту, тому дані різних користувачів не змішуються. Міжзапитне кешування в Next.js робиться через 'use cache'.

2. Що таке Fiber у React?

   Правильна відповідь: Архітектура реконсилера: рендер розбито на одиниці роботи, які можна переривати

   Fiber (React 16+) подає кожен вузол дерева як об'єкт-«волокно» з інформацією про роботу. Це дає змогу призупиняти, переривати й пріоритизувати рендер, перевикористовувати роботу - основа concurrent-можливостей (transitions, Suspense). Раніше стековий реконсилер обходив дерево рекурсивно й без зупинок.

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

   Правильна відповідь: Рендер переривний і може повторюватися; коміт синхронно застосовує зміни до DOM

   У фазі рендеру React викликає компоненти й обчислює різницю - її можна перервати, відкинути й почати знову, тому рендер мусить бути чистим. У фазі коміту зміни застосовуються до DOM цілком і без переривань, потім викликаються layout-ефекти, а після відмальовування - звичайні ефекти.

4. Що дає concurrent-рендеринг користувачеві?

   Правильна відповідь: Термінові оновлення (введення) можуть перервати важкий нетерміновий рендер

   Concurrent - це не багатопотоковість: JS і далі виконується в одному потоці. React уміє готувати кілька версій UI, поступатися керуванням браузеру й переривати менш пріоритетну роботу (transitions) заради термінової. Вмикається під час використання startTransition, useDeferredValue і Suspense.

Збірні тести з цією темою

Запитання з кількох тем одразу - як на співбесіді на конкретну вакансію.