40 найкращих питань та відповідей на співбесіді з React JS (2026)
Джеймс Гартман
Готуєтеся до співбесіди на React JS? Час дізнатися, що вас чекає. Розуміння Питання на співбесіді з React JS допомагає виявити як вашу концептуальну ясність, так і сильні сторони впровадження в реальних умовах.
React JS пропонує величезні кар'єрні можливості для фахівців з технічним досвідом та знаннями в предметній області. Незалежно від того, чи ви новачок, чи старшокласник з 5 або 10 роками професійного досвіду, навички аналізу та технічні знання мають значення. Ці питання та відповіді допомагають керівникам команд, менеджерам та розробникам удосконалити свої навички та успішно пройти співбесіди.
Ґрунтуючись на думках понад 85 фахівців, включаючи менеджерів з найму та технічних керівників, ця збірка відображає різноманітні очікування галузі та реальні моделі співбесід, зібрані з робочих команд у різних сферах.
Найпопулярніші питання та відповіді на співбесіді з React JS
1) Поясніть віртуальний DOM та як працює узгодження в React.
Відповідь:
Віртуальний DOM — це представлення інтерфейсу користувача в пам'яті, яке React підтримує для ефективного обчислення змін інтерфейсу. Коли стан або властивості змінюються, React створює нове дерево віртуального DOM, а потім запускає диференціація алгоритм порівнює його з попереднім деревом, щоб виявити мінімальний набір необхідних реальних DOM-операцій. Цей процес, який називається примирення, мінімізує перевантаження макета та дороге перекомпонування елементів у браузері. React призначає значення ключі до елементів у списках, щоб допомогти йому зіставляти вузли під час рендерингу, а також використовує евристику (наприклад, порівняння типів і ключів), щоб вирішити, чи оновлювати, змінювати порядок або видаляти вузли. Переваги включають передбачувані оновлення, меншу площу поверхні для помилок і кращу продуктивність у складних інтерфейсах користувача.
приклад:
Рендеринг динамічного списку повідомлень чату: за допомогою stable key значення (ідентифікатори повідомлень), до DOM додаються лише нові повідомлення, тоді як існуючі вузли залишаються недоторканими, що дозволяє уникнути непотрібних повторних рендерів.
👉 Безкоштовне завантаження PDF: Запитання та відповіді для співбесіди з React JS
2) Які існують різні типи життєвих циклів компонентів у React, і як хуки відповідають їм?
Відповідь:
Компоненти React проходять фази монтування, оновлення та відмонтування. У компонентах класу методи життєвого циклу, такі як componentDidMount, shouldComponentUpdate, componentDidUpdate та componentWillUnmount керують побічними ефектами, рішеннями щодо рендерингу та очищенням. У функціональних компонентах, гачки забезпечують еквівалентні можливості: useEffect обробляє ефекти після рендерингу; функції очищення всередині useEffect запускатися під час розмонтування або перед наступним ефектом; useMemo та useCallback контрольна мемоізація; та useRef зберігає змінні посилання під час рендерингу. Переваги хуків включають компонування, менше проблем із зв'язуванням "this" та легше повторне використання логіки за допомогою користувацьких хуків, тоді як основним недоліком є необхідність вивчення правил хуків та управління залежностями.
Відповідь з прикладами:
- Ефект кріплення:
useEffect(() => fetchData(), []). - Очищення при розмонтуванні:
useEffect(() => { start(); return stop; }, []).
3) Як ви обираєте між клієнтською рендерингом (CSR), серверною рендерингом (SSR), генерацією статичного сайту (SSG) та інкрементальною статичною регенерацією (ISR) для React-застосунку?
Відповідь:
Стратегія рендерингу повинна визначатися вимогами до користувацького досвіду, актуальністю даних, потребами SEO, обмеженнями інфраструктури та швидкістю розробки. КСВ підходить для високоінтерактивних додатків, що стоять за автентифікацією, де SEO є вторинним. SSR забезпечує першу візуалізацію з реальними даними для публічних сторінок, покращуючи час до першого байта та SEO, але з вищими витратами на сервер. SSG попередньо обчислює сторінки під час збірки для чудової швидкості та кешування, коли дані змінюються рідко. ISR оновлює статичні сторінки поступово за вимогою, пропонуючи баланс актуальності та продуктивності. До факторів належать кешування, персоналізація, затримка для глобальної аудиторії та операційна складність.
Таблиця: Переваги та недоліки
| Підхід | Переваги | Недоліки |
|---|---|---|
| КСВ | Простий хостинг, багата інтерактивність | Повільніше перше фарбування, слабше SEO |
| SSR | Чудове SEO, актуальні дані з першого завантаження | Вище навантаження на сервер, складність |
| SSG | Швидко, дешево, зручно для CDN | Застарілий контент до переробки |
| ISR | Швидкий з контрольованою свіжістю | Більше рухомих частин для керування |
4) Яку стратегію управління станом слід використовувати: локальний стан, контекст, Redux чи бібліотеки запитів?
Відповідь:
Виберіть найпростіший інструмент що обробляє характеристики проблеми. Стан локального компонента через useState or useReducer ідеально підходить для окремих проблем з інтерфейсом користувача. Контекст працює переважно для значень, призначених для читання та діючих на рівні всієї програми (тема, локаль, поточний користувач), але не оптимізовано для високочастотних оновлень у великих деревах. Redux або подібні сховища на основі подій чудово підходять, коли вам потрібна передбачуваність, налагодження в часі, проміжне програмне забезпечення та суворі односпрямовані потоки даних. Бібліотеки отримання даних (наприклад, шаблони в стилі React Query) керують життєвими циклами стану сервера — кешуванням, дедуплікацією, стратегіями повторної вибірки та синхронізацією — зменшуючи шаблонний підхід. Прагматична архітектура часто використовує локальний стан + контекст для конфігурації + бібліотека станів сервера, резервуючи Redux для складних робочих процесів.
приклад:
Панель інструментів використовує React Query для кешування API, Context для теми та useReducer всередині складних віджетів для обробки локальних подій.
5) Яка різниця між useEffect та useLayoutEffect, і коли кожен з них застосовується?
Відповідь:
useEffect запускається після того, як браузер завершив відображення, що робить його придатним для неблокуючих завдань, таких як отримання даних, підписки та ведення журналу. useLayoutEffect виконує синхронно після мутацій DOM, але перед фарбуванням, що дозволяє вимірювання та коригування макета, які повинні відбуватися без мерехтіння (наприклад, зчитування розмірів елементів та синхронне повторне застосування стилів). Недоліком useLayoutEffect полягає в тому, що він може блокувати малювання та погіршувати швидкість реагування, якщо його надмірно використовувати. Гарне правило — почати з useEffect щодо побічних ефектів та охоплення useLayoutEffect лише тоді, коли потрібно виміряти або синхронно змінити макет, щоб забезпечити візуальну правильність.
Відповідь з прикладами:
useEffect: отримати профіль користувача після рендерингу.useLayoutEffect: виміряйте розмір підказки, щоб розташувати її перед малюванням.
Швидке порівняння
| Характеристика | useEffect | useLayoutEffect |
|---|---|---|
| Синхронізація | Після фарбування | Перед фарбуванням |
| Використовуйте футляр | Дані, підписки | Вимірювання, синхронні виправлення макета |
| Risk | Незначний тріск, якщо сильний | Блоки фарби, якщо важкі |
6) Поясніть, як працюють ключі у списках, та підводні камені використання індексів масивів.
Відповідь:
Ключі дозволяють React точно ідентифікувати елементи списку між рендерами. Стабільні, унікальні ключі дозволяють React змінювати порядок, вставляти або видаляти елементи з мінімальною відтоком DOM. Використання індекси масивів Використання ключів як ключів є проблематичним, коли елементи можна змінювати порядок, вставляти або видаляти, оскільки React може пов'язати попередній стан з неправильним елементом, що призводить до незначних помилок (наприклад, неправильних вхідних значень або анімації). Найкращою практикою є використання незмінного, специфічного для домену ідентифікатора, такого як ідентифікатор бази даних. Якщо список справді статичний і ніколи не змінює порядок, індекси прийнятні, але це скоріше виняток, ніж правило.
приклад:
Перетягувана дошка Канбан повинна використовувати ідентифікатори карток, а не індекси, щоб зберегти ідентичність компонентів під час перетягування.
7) Де в React застосовуються методи мемоізації, і які їхні переваги та недоліки?
Відповідь:
Мемоізація зменшує непотрібні обчислення та повторні рендери, повторно використовуючи попередні результати, коли вхідні дані не змінилися. У React, React.memo кешує вивід компонентів, useMemo кешує дорогі обчислення та useCallback запам'ятовує ідентифікатори функцій, що передаються дочірнім функціям. Основними перевагами є стабільність продуктивності та зменшення використання процесора під час інтенсивної взаємодії. Недоліки включають складність, потенційні помилки застарілого кешу, якщо залежності неправильні, та накладні витрати пам'яті.
Таблиця: Різні способи запам'ятовування
| тип | Мета | Типові фактори, які слід враховувати |
|---|---|---|
React.memo(Component) |
Пропустити повторний рендеринг, якщо props має значення shallow-equal | Волатильність пропа, вартість дитини |
useMemo(fn, deps) |
Кешовані обчислені значення | Вартість обчислень порівняно з пам'яттю |
useCallback(fn, deps) |
Стабільна функціональна ідентичність | Коректність залежностей |
Відповідь з прикладами:
Запам'ятовування відфільтрованого, відсортованого набору даних для сітки за допомогою useMemoта обгорніть компоненти рендерера комірок за допомогою React.memo щоб уникнути повторного рендерингу штормів.
8) Ви надаєте перевагу контрольованим чи неконтрольованим компонентам для форм? Обговоріть переваги, недоліки та типи станів форми.
Відповідь:
Контрольовані компоненти прив’язати входи до стану React через value та onChange, що дозволяє перевірку, маскування та умовний інтерфейс користувача, отримані з єдиного джерела достовірної інформації. Перевагами є передбачуваність та легка інтеграція з іншими станами; недоліками є вартість повторного рендерингу при кожному натисканні клавіші без оптимізації. Неконтрольовані компоненти покладатися на DOM як джерело істини за допомогою посилань, що пропонує менші накладні витрати та простішу схему для базових форм, але менш централізовану перевірку. Для складних робочих процесів поширеним є гібридний шаблон, який використовує контрольовані вхідні дані для критичних полів та неконтрольовані для великих областей з великим вмістом тексту.
приклад:
Форма реєстрації використовує контрольовані поля для перевірки електронної пошти та пароля, тоді як текстове поле для нотаток є неконтрольованим, щоб зменшити накладні витрати на повторне відображення.
9) Коли слід використовувати контекст, а коли користувацький хук, і яка концептуальна різниця між ними?
Відповідь:
Контекст це транспортний механізм для значень, які потрібні багатьом компонентам, уникаючи переробки проп-файлів. Він не керує станом самостійно; він просто надає його нащадкам. A гачок на замовлення інкапсулює логіку повторного використання, поєднуючи стан, ефекти та зовнішні сервіси, повертаючи значення та функції. Використовуйте контекст для забезпечення спільної конфігурації, призначеної переважно для читання, або для відкриття сховища, а також використовуйте користувацькі перехоплювачі для реалізації поведінки сховища або для впорядкування таких питань, як автентифікація, прапорці функцій або політики отримання даних. Ці два елементи доповнюють один одного: загальний шаблон полягає в наступному: useAuth() як спеціальний гачок, підкріплений AuthContext.
Відповідь з прикладами:
AuthProvider надає користувача та токени через контекст; useAuth обробляє побічні ефекти входу, оновлення та виходу з системи.
10) Чи можете ви окреслити стратегії налаштування продуктивності для великих React-застосунків, включаючи характеристики повільних рендерів та гарячих точок життєвого циклу?
Відповідь:
Налаштування продуктивності починається з вимірювання. Визначте повільні шляхи за допомогою React DevTools Profiler та панелей продуктивності браузера, щоб знайти гарячі точки узгодження та дорогі коміти. Тактики включають державна місцевість (тримати державу поруч зі своїми споживачами), запам'ятовування (React.memo, useMemo, useCallback), віртуалізація списків для довгих списків, поділ коду з лінивим завантаженням для зменшення початкового пакету, та усунення дребезгу або дроселювання високочастотні події. Для даних, що зберігаються на сервері, застосовуйте кешування за допомогою бібліотеки запитів та використовуйте захопливий шаблони для плавнішого завантаження. Звертайте увагу на гарячі точки життєвого циклу, такі як ефекти, які запускаються занадто часто через широкі масиви залежностей, або компоненти, які повторно відображаються через часту зміну значень контексту.
Відповідь з прикладами:
Віртуалізуйте таблицю з 10 000 рядків за допомогою бібліотеки вікон; відкладено завантажуйте важкі діаграми за розділенням коду на основі маршрутів для покращення початкового відображення.
11) Яка різниця між props та state у React?
Відповідь:
обидві props та state впливають на те, як компоненти відображаються, але їхнє призначення та життєвий цикл принципово відрізняються. бутафорія (скорочення від властивості) – це незмінні вхідні дані, що передаються від батьківського компонента до дочірнього, що визначають конфігурацію або дані для рендерингу. Вони виконуються вниз в односпрямованому потоці даних React і ніколи не повинен змінюватися компонентом-отримувачем. стан, з іншого боку, є змінним і підтримується компонентом внутрішньо. Він визначає динамічну поведінку, яка змінюється з часом, таку як значення введення форми або перемикання видимості.
Таблиця ключових відмінностей:
| Фактор | бутафорія | стан |
|---|---|---|
| Змінюваність | Незмінний | Змінний |
| Власність | Передано батьками | Належить компоненту |
| Метод оновлення | Батьківські повторні рендери | useState or setState |
| Використовуйте Case | конфігурація | Динамічні зміни інтерфейсу користувача |
| Життєвий цикл | Існує під час рендерингу | Зберігається, запускає повторний рендеринг |
приклад:
A <Button color="blue" /> використовує реквізит для визначення кольору, тоді як clicked логічне значення у своєму стані перемикає візуальний зворотний зв'язок.
12) Поясніть шаблон архітектури компонентів у React та різні способи класифікації компонентів.
Відповідь:
React-додатки дотримуються компонентна архітектура, розбиваючи інтерфейс користувача на невеликі, повторно використовувані будівельні блоки. Компоненти можна класифікувати за їх мета та відповідальність:
- Презентаційні (німі) компоненти – Зосередьтеся на інтерфейсі користувача, отримуйте дані через пропси та рідко керуйте станом.
- Контейнерні (розумні) компоненти – Обробляють логіку, отримують дані та керують станом; вони відображають презентаційні компоненти.
- Компоненти вищого порядку (HOC) – Функції, які приймають компонент і повертають його покращену версію з додатковою поведінкою.
- Чисті компоненти – Оптимізуйте продуктивність шляхом поверхневого порівняння пропсів та стану.
- Функціональні та класові компоненти – Функціональні компоненти (з гачками) тепер переважні для зручності читання та продуктивності.
приклад:
A <UserProfile /> компонент може бути презентаційним, отримувати інформацію про користувача, водночас <UserProfileContainer /> отримує дані та керує їх життєвим циклом.
13) Як React обробляє межі помилок і чому вони важливі?
Відповідь:
Межі помилок це спеціальні React-компоненти, які перехоплюють JavaПомилки скриптів будь-де в дереві дочірніх компонентів під час рендерингу, методів життєвого циклу або конструкторів. Вони запобігають повним збоям програми, ізолюючи збої в певних піддеревах. Ви можете реалізувати один за допомогою componentDidCatch(error, info) та static getDerivedStateFromError() у компоненті класу.
переваги:
- Зберігайте стабільність інтерфейсу користувача, показуючи резервні інтерфейси.
- Фіксуйте та реєструйте помилки для аналітики.
- Запобігти каскадним відключенням.
приклад:
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
render() { return this.state.hasError ? <h2>Something went wrong.</h2> : this.props.children; }
}
14) Що таке React Fragments і чим вони відрізняються від обгортки елементи?
Відповідь:
Реагувати Фрагменти (<></>) дозволяють групувати кілька елементів без додавання додаткових вузлів до DOM. Це важливо для чистішої структури, особливо у списках, таблицях та семантичному HTML, де додаткові обгортки можуть спричинити проблеми з макетом або доступністю. На відміну від обгортки <div>Фрагменти не відображаються в DOM і, отже, мають переваги в продуктивності та семантиці.
приклад:
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
Таблиця відмінностей:
| Фактор | фрагмент | <div> Обгортка |
|---|---|---|
| Вивід DOM | ніхто | Додає додатковий вузол |
| Використовуйте Case | Структурне групування | Стиль або макет |
| продуктивність | Краще | Невелика надголовна висота |
15) Який React Hook ви б використали для оптимізації продуктивності та чому?
Відповідь:
Компоненти React, чутливі до продуктивності, часто покладаються на гачки мемоізації та ледаче завантаження щоб мінімізувати зайву роботу. Звичайні гачки включають:
useMemo→ Кешує обчислювально ресурсоємні результати.useCallback→ Запобігає непотрібним дочірнім рендерингам через зміни ідентифікації функцій.useTransition→ Відкладає нетермінові оновлення для плавнішого інтерфейсу.useDeferredValue→ Відкладає важкі обчислення до моменту безпосередньої взаємодії.
приклад:
Велика сітка даних, що використовує useMemo для відфільтрованих результатів може зменшити споживання процесора на 50% або більше.
переваги:
- Зменшує кількість втрачених рендерів.
- Забезпечує чутливість інтерфейсу користувача під навантаженням.
Недолік:
- Потрібна точність залежностей; при неправильному управлінні можуть виникати помилки застарілого кешу.
16) Що таке React-портали та які їхні переваги?
Відповідь:
Портали дозволяють компонентам React відображати дочірні елементи у вузол DOM поза їх батьківською ієрархією, зазвичай для модальних вікон, підказок або випадаючих списків, які повинні візуально «уникати» переповнення або контекстів стекування. Реалізовано за допомогою ReactDOM.createPortal(child, container), вони підтримують узгодженість бульбашок подій, тому обробники подій працюють так, ніби елемент залишається всередині своєї початкової ієрархії.
Таблиця переваг:
| Перевага | Опис |
|---|---|
| Структурна незалежність | Рендеринг за межами батьківського дерева |
| CSS/Керування стекуванням | Уникнути overflow: hidden або проблеми з z-index |
| Поширення подій | Синтетичні події React все ще коректно відображаються в бульбашках |
| Багаторазовість | Ідеально підходить для глобальних накладок |
приклад:
createPortal(<ModalContent />, document.getElementById('modal-root'));
17) Поясніть, як React Router керує навігацією та станом між сторінками.
Відповідь:
React Router — це декларативна бібліотека маршрутизації, яка синхронізує інтерфейс користувача з URL-адресою браузера. Вона використовує API історії маніпулювати історією сеансу без повного перезавантаження сторінки. Основні концепції включають Маршрути, зв'язку та Вихід для вкладеної маршрутизації. Бібліотека підтримує динамічні маршрути, Параметри URL та навігаційні гачки (useNavigate, useParams, useLocation). React Router версії 6 запровадив спрощений синтаксис та API даних для завантажувач та дію функції, покращення інтеграції РСБ та державного управління.
приклад:
<Route path="/user/:id" element={<UserProfile />} />
Переваги:
- Дозволяє навігацію по одній сторінці.
- Зберігає позицію прокручування та історію.
- Чисто інтегрується з лінивим завантаженням для кращої продуктивності.
18) Які існують різні способи обробки побічних ефектів у React-застосунках?
Відповідь:
Побічні ефекти стосуються дій, які впливають на щось поза межами області дії компонента (виклики API, маніпуляції DOM, підписки). Основні інструменти включають:
useEffectдля ефектів на стороні клієнта після рендерингу.- Обробники подій для ефектів, керованих користувачем.
- Гачки на замовлення повторно використовувати логіку ефектів (наприклад,
useFetch). - проміжне (як Redux Saga або Thunk) для складної асинхронної оркестрації.
- React Query або SWR для автоматичного керування станом сервера та життєвими циклами оновлення.
приклад:
A useEffect отримує дані один раз під час монтування:
useEffect(() => { fetchData(); }, []);
переваги:
Спрощене керування асинхронністю, краща інкапсуляція та чіткіший контроль життєвого циклу.
19) React — це фреймворк чи бібліотека? Обговоріть фактори, що визначають різницю.
Відповідь:
React офіційно є бібліотека, а не повноцінна структура. Вона зосереджена виключно на шар перегляду, що забезпечує абстракції рендерингу, стану та компонентів без примусового виконання маршрутизації, вибору даних або структури збірки.
Порівняльна таблиця:
| Фактор | Бібліотека (React) | Фреймворк (Angular, Vue) |
|---|---|---|
| Сфера | Перегляд рендерингу | Повна архітектура MVC |
| Висловив думку | низький | Високий |
| Контроль | Орієнтований на розробників | Орієнтований на фреймворк |
| Гнучкість | Високий | Обмежено умовностями |
| Крива навчання | Помірна | Вищий через складність |
Екосистема React (Redux, Router, Query, Next.js) ефективно формує «мета-фреймворк», пропонуючи модульну компонуємість, яка дозволяє розробникам створювати власну архітектуру.
20) Коли варто використовувати React.lazy та Suspense, і які їхні переваги?
Відповідь:
React.lazy дозволяє поділ коду шляхом динамічного завантаження компонентів лише за потреби, Suspense забезпечує резервний інтерфейс користувача, доки компонент не буде готовий. Ця комбінація покращує початкову продуктивність завантаження та сприйняття користувачем швидкості реагування.
приклад:
const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
<Chart />
</Suspense>
Таблиця переваг:
| Перевага | Пояснення |
|---|---|
| продуктивність | Завантажує код на вимогу |
| User Experience | Витончене резервне завантаження |
| Розмір пакета | Менший початковий пакет |
| Простота | Native React API, мінімальне налаштування |
Кращі практики:
- Оберніть кілька лінивих компонентів в одну межу Suspense.
- Використовуйте змістовні резервні індикатори для забезпечення доступності.
21) Поясніть, що таке компоненти React Server (RSC) та які їхні переваги.
Відповідь:
Компоненти React Server (RSC) – це важливе нововведення, запроваджене для підвищення продуктивності та досвіду розробника, дозволяючи компонентам... рендерити на сервері без надсилання своїх JavaСценарій для клієнтаВони повністю виконуються на сервері, отримуючи дані, зчитуючи їх з баз даних або безпечно виконуючи операції вводу-виводу, перш ніж передавати серіалізований вивід клієнту.
переваги:
- Менший розмір пакета — Немає клієнтського JS для логіки, орієнтованої лише на сервер.
- Покращена продуктивність — Отримання даних на стороні сервера зменшує водоспади.
- Безпека — Конфіденційний код ніколи не досягає браузера.
- Краще кешування — Компоненти сервера можна кешувати на периферії.
приклад:
A <ProductList /> серверний компонент може безпосередньо отримувати дані з бази даних і передавати результати до <ProductCard /> клієнтський компонент.
22) Яка різниця між гідратацією React та ремісією?
Відповідь:
Хоча обидва терміни стосуються оновлення інтерфейсу користувача в React, їхнє призначення відрізняється:
- Примирення – це процес порівняння віртуального дерева DOM з його попередньою версією для визначення мінімального набору оновлень DOM.
- Гідратація, з іншого боку, це процес приєднання слухачів подій React та внутрішніх структур до HTML-файл, що відображався на сервері на стороні клієнта, перетворюючи статичну розмітку на повністю інтерактивний додаток.
Порівняльна таблиця:
| Фактор | Примирення | Гідратація |
|---|---|---|
| Тригер | Повторний рендеринг клієнта | Початкове завантаження сторінки (SSR) |
| Мета | Ефективне оновлення DOM | Зробіть SSR HTML інтерактивним |
| Сфера | Віртуальне розходження DOM | Прив'язка події + повторне приєднання стану |
| частота | Багато разів | Після рендерингу SSR |
приклад:
Після того, як додаток Next.js надсилає попередньо відрендерений HTML, React гідратів так що компоненти реагують на події без повторного рендерингу всього.
23) Як паралельний рендеринг покращує взаємодію з користувачем у React 18+?
Відповідь:
Паралельний рендеринг дозволяє React переривати, призупиняти або відновлювати рендеринг на основі пріоритету користувача. Це запобігає зависанню інтерфейсу користувача під час складних обчислень або повторного рендерингу. Такі функції, як useTransition та useDeferredValue використати цю здатність для розділення термінові оновлення (як друкувати) з нетерміновий ті (наприклад, фільтрація).
Переваги:
- Плавна, чуйна взаємодія.
- Квадратування часу для запобігання блокуванню основного потоку.
- Передбачувана пріоритезація для кращого UX.
приклад:
const [isPending, startTransition] = useTransition(); startTransition(() => setFilteredList(filter(items, term)));
Тут введення тексту залишається плавним навіть під час фільтрації великих наборів даних, оскільки React планує нетермінові оновлення одночасно.
24) Які існують різні способи тестування в React-застосунках?
Відповідь:
React-тестування можна класифікувати на блок, інтеграція та кінець в кінець рівнях.
Таблиця методів тестування:
| тип | Інструмент | Мета |
|---|---|---|
| Блок | є | Тестування ізольованих функцій/компонентів |
| інтеграцією | Бібліотека реагування на реагування | Тестування взаємодій інтерфейсу користувача та змін стану |
| E2E | Cypress / Драматург | Тестування потоків користувачів у реальних браузерах |
Кращі практики:
- Віддавайте перевагу Бібліотека реагування на реагування над ферментом (сучасним, орієнтованим на DOM).
- Імітація API за допомогою
msw(Фальшивий працівник сфери послуг). - Уникайте тестування деталей реалізації — зосередьтеся на поведінці.
приклад:
test('renders user name', () => {
render(<User name="Alice" />);
expect(screen.getByText(/Alice/)).toBeInTheDocument();
});
25) Які інструменти збірки та пакетери найчастіше використовуються з React, і які їхні відмінності?
Відповідь:
React може інтегруватися з кількома пакетерами та компіляторами, кожен з яких оптимізований для різних випадків використання.
Порівняльна таблиця:
| Інструмент | характеристика | Переваги | Недоліки |
|---|---|---|---|
| Webpack | Висока конфігурація | Зрілий, багатий на плагіни | Складне налаштування |
| Віте | Блискавично швидкий сервер розробки на базі ESM | Миттєвий HMR, сучасний синтаксис | Обмежена підтримка застарілих плагінів |
| Посилка | Нульова конфігурація | Автооптимізація | Less гнучкий |
| esbuild | Компілятор на основі Go | Надзвичайно швидко | Менше плагінів екосистеми |
приклад:
Сучасні проекти часто використовують Віте для швидкості розробки та esbuild у конвеєрах CI/CD для ефективної збірки в робочому середовищі.
26) Як Next.js розширює можливості React?
Відповідь:
Next.js – це Framework React забезпечує продуману архітектуру для маршрутизації, SSR та генерації статичних даних. Вона впроваджує гібридні моделі рендерингу, маршрути API та функції розгортання, готові до використання на периферії.
переваги:
- Вбудований SSR/SSG/ISR support.
- Маршрутизатор програм з компонентами React Server.
- Оптимізація зображень та проміжне програмне забезпечення для продуктивності та безпеки.
- Прості API-маршрути для безсерверних функцій.
приклад:
app/page.js для сторінок, відрендерених за допомогою SSR; app/api/route.js для кінцевих точок сервера.
В ціломуNext.js дозволяє створювати React-додатки продакшн-класу з мінімальною конфігурацією.
27) Які поширені проблеми з продуктивністю в React і як їх можна уникнути?
Відповідь:
Поширені проблеми продуктивності React включають:
- Непотрібні повторні рендери — Виправити за допомогою
React.memoабо розділення компонентів. - Створення вбудованих об'єктів/масивів — Використовуйте
useMemoдля стабільних посилань. - Великі списки — Реалізація віконної роботи (
react-window,react-virtualized). - Важкі обчислення — Запам’ятовувати або вивантажувати веб-працівникам.
- Надмірне використання контексту — Часті оновлення поширюються глибоко; перевага надається похідному стану.
приклад:
Якщо пройдеш { a: 1 } Вбудований у мемоізований компонент, він повторно рендериться при кожному батьківському рендері. Виправте це, замемоізувавши об'єкт.
Таблиця порад щодо продуктивності:
| Питання | Техніка оптимізації |
|---|---|
| Повторно рендерить | React.memo, useCallback |
| Дорогі розрахунки | useMemo, Веб-працівники |
| Великі набори даних | Віртуалізація |
| Часті оновлення контексту | Локалізувати стан |
28) Поясніть різницю між useReducer та useState.
Відповідь:
Обидва гачки керують станом, але вони відрізняються складністю та контролем.
useStateідеально підходить для простих, ізольованих переходів між станами.useReducerцентралізує складну логіку станів у функція редуктора, Використовуючиdispatchдії для передбачуваних оновлень.
Порівняльна таблиця:
| Фактор | useState | використовуватиReducer |
|---|---|---|
| синтаксис | [value, setValue] |
[state, dispatch] |
| складність | простий | Від помірного до складного |
| Використовуйте Case | Незалежні держави | Пов'язані або вкладені стани |
| Налагодження | Less докладний | Легше через зареєстровані дії |
| Приклад | Перемикачі форми | Перевірка форми або багатоетапні форми |
приклад:
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });
29) Як можна покращити доступність (a11y) у React-застосунках?
Відповідь:
Доступність гарантує, що всі користувачі, включаючи людей з інвалідністю, можуть ефективно використовувати ваш застосунок. React забезпечує доступність за допомогою семантичної розмітки та атрибутів ARIA.
Кращі практики:
- Скористайтеся кнопкою семантичний HTML (
<button>vs<div onClick>). - Керуйте фокусом за допомогою
refтаtabIndex. - Використовуйте ролі ARIA для динамічних компонентів.
- Забезпечте контрастність кольорів та альтернативні варіанти тексту для зображень.
- Використовуйте такі інструменти, як eslint-plugin-jsx-a11y та ось-ядро для аудитів.
приклад:
<button aria-label="Close dialog" onClick={closeModal}>×</button>
переваги:
- Ширше охоплення аудиторії.
- Покращення SEO.
- Відповідність стандартам WCAG.
30) Чи можете ви описати, чим відрізняються розділення коду та ліниве завантаження, і коли використовувати кожен з них?
Відповідь:
Обидва методи оптимізують розмір пакета та продуктивність завантаження, але відрізняються час виконання.
- Розщеплення коду розділяє великі пакети на менші частини, які можна завантажувати незалежно.
- Ляжке навантаження затримує завантаження цих фрагментів до моменту їхньої потреби.
Порівняльна таблиця:
| Фактор | Поділ коду | відкладеної завантаження |
|---|---|---|
| Визначення | Розділяє код на фрагменти | Завантажує фрагменти на вимогу |
| Інструмент | Вебпак, Віте | React.lazy, динамічний import() |
| Мета | Оптимізуйте розмір пакету | Покращення продуктивності під час виконання |
| Виконання | Час збірки | Час виконання |
приклад:
const Settings = React.lazy(() => import('./Settings'));
Використані разом, ці методи скорочують час взаємодії та підвищують сприйняту швидкість роботи великих програм.
31) Поясніть концепцію Render Props та її відмінність від компонентів вищого порядку (HOC).
Відповідь:
Рендеринг пропсів — це шаблон у React, де компонент приймає функціонувати як реквізит який вказує йому, що потрібно відображати. Це дозволяє спільно використовувати логіку компонентів між кількома компонентами без дублювання.
З іншого боку, HOC обернути компонент і повернути покращену версію з вставленими пропсами або поведінкою.
Порівняльна таблиця:
| Фактор | Рендеринг пропсів | HOC |
|---|---|---|
| Реалізація | Функція як дочірня особа | Компонент, що обгортає функції |
| Склад: | Вбудований контроль | Декларативне обгортання |
| читабельність | Часто чіткіше | Може спричинити обгорткове пекло |
| Використовуйте Case | Логіка динамічного рендерингу | Загальні проблеми |
приклад:
<DataProvider render={data => <UserList users={data} />} />
Render Props пропонують кращу гнучкість та уникають конфліктів імен, поширених у HOC.
32) Які існують різні типи гачків на замовлення та їхні переваги?
Відповідь:
Користувацькі хуки інкапсулюють логіку повторного використання, поєднуючи стан, побічні ефекти та утиліти. Вони покращують можливість повторного використання коду, розділення проблем та тестованість.
Типи та приклади:
- Гачки для управління станом -
useToggle,useForm. - Перехоплювачі даних -
useFetch,useQuery. - UI/UX-хуки -
useWindowSize,useDarkMode. - Інтеграційні гачки -
useLocalStorage,useMediaQuery. - Гачки для продуктивності -
useDebounce,useThrottle.
переваги:
- Централізоване повторне використання логіки.
- Чистіші компоненти.
- Незалежне тестування.
приклад:
function useLocalStorage(key, initial) {
const [value, setValue] = useState(() => JSON.parse(localStorage.getItem(key)) || initial);
useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [value]);
return [value, setValue];
}
33) Як ви вирішуєте проблеми з витоками пам'яті в React-застосунках?
Відповідь:
Витоки пам'яті трапляються, коли відмонтовані компоненти все ще містять посилання на ресурси або підписки. Вони знижують продуктивність і спричиняють непередбачувану поведінку.
Методи профілактики:
- Ефекти очищення in
useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []); - Перервати асинхронні виклики використання
AbortController. - Уникайте збереження застарілих замикань посилання на старі props/state.
- Відписатися від подій або сокетів при розмонтуванні.
- Використовуйте React Profiler виявити повільний розвиток пам'яті.
приклад:
У чат-застосунку завжди відключайте прослуховувачі сокетів, коли користувач виходить з кімнати чату.
34) Які найкращі практики для керування формами у великих React-застосунках?
Відповідь:
Керування формами в React-додатках корпоративного масштабу вимагає балансу між контролем, продуктивністю та зручністю обслуговування.
Кращі практики:
- Використовуйте бібліотеки, такі як Формік, Форма React Hookабо Остаточна форма для перевірки та реєстрації на місці.
- Групуйте пов'язані поля за допомогою вкладених компонентів або контекстів.
- Застосовувати перевірка схеми (Так, Зод) для послідовності.
- Усунення банкрутства під час складних перевірок або перевірок API.
- Зберігайте стан форми локалізованим, якщо це не потрібно глобально.
приклад:
React Hook Form мінімізує повторні рендери, ізолюючи стан введення.
const { register, handleSubmit } = useForm();
<input {...register('email', { required: true })} />
35) Які шаблони проектування є найкориснішими в розробці на React, і які їхні характеристики?
Відповідь:
React природно поєднується з кількома шаблонами проектування програмного забезпечення для забезпечення зручної та масштабованої архітектури інтерфейсу користувача.
| Викрійки | Опис | Приклад |
|---|---|---|
| Контейнер-презентатор | Окрема логіка (контейнер) від інтерфейсу користувача (презентер) | Контейнер даних → Компонент інтерфейсу користувача |
| Контрольований-Неконтрольований | Керування даними форми через стан порівняно з DOM | Formik проти необроблених вхідних даних |
| Складні компоненти | Батьківський контроль над дочірнім складом | <Tabs><Tab /></Tabs> |
| Шаблон постачальника | Поділитися станом через контекст | Постачальник тем |
| Візерунок гачків | Повторне використання логіки з урахуванням стану | useAuth, useFetch |
приклад:
A Tabs компонент відкриває контекст, тому <Tab> діти автоматично реєструються — чисте застосування Складний компонент рисунок.
36) Які ключові відмінності між React 18 та React 19?
Відповідь:
React 19 базується на паралельній основі React 18 зі значними новими можливостями.
| особливість | Реакція 18 | Реакція 19 |
|---|---|---|
| Паралельний рендеринг | Введений | Покращено з кращим саспенсом |
| Компоненти сервера | Експериментальна | Стабілізований та інтегрований |
| API дій | Недоступний | Новий стандарт обробки дій форми |
| Завантаження ресурсів | Мануал | Автоматичне завантаження ресурсів |
| Покращена обробка помилок | Базовий | Гранульований з граничними гачками |
Основні переваги:
React 19 зосереджується на простіші мутації даних, вбудовані дії форми та покращений контроль асинхронності, що робить SSR та прогресивну гідратацію більш безперебійною.
37) Як працює мікрофронтенд ArchiЧи інтегрується текстура з React, і які її переваги?
Відповідь:
Мікрофронтенди розділяють великий веб-застосунок на незалежні, розгортані фронтенд-модулі. В екосистемі React кожен мікрофронтенд — це окремий застосунок, який можна інтегрувати через Модульна федерація, плаваючі фреймиабо користувацькі завантажувачі середовища виконання.
переваги:
- Незалежне розгортання та масштабування.
- Автономія команди в різних технологічних стеках.
- Швидше будувати трубопроводи.
приклад:
використання Федерація модуля Webpackкоманди можуть динамічно надавати доступ до компонентів React у різних додатках:
exposes: { './NavBar': './src/NavBar' }
Недоліки:
- Складність управління спільним станом.
- Накладні витрати на продуктивність від ізольованих пакетів.
38) Які фактори ви враховуєте для масштабування React-застосунку у продакшені?
Відповідь:
Масштабування React-застосунків включає технічні, архітектурні та операційні аспекти.
Ключові фактори:
- Структура коду — використовувати монорепозиторії (Nx/Turborepo) для модульного спільного використання коду.
- Державне управління — сегментація локальних, глобальних та серверних станів.
- продуктивність — ліниве завантаження, мемоізація, кешування CDN.
- Моніторинг — використовуйте Sentry, Datadog або LogRocket для помилок та метрик.
- Тестування та CI/CD — автоматизовані конвеєри та візуальні регресійні тести.
приклад:
Велика платформа електронної комерції масштабує React-додатки, використовуючи Next.js для SSR, Redux Toolkit для передбачуваного стану та мікрофронтенди для ізольованих вертикалей.
39) Як тестувати компоненти React, що використовують асинхронну поведінку?
Відповідь:
Тестування асинхронних React-компонентів вимагає синхронізації між запускачем тестів та оновленнями стану компонента.
Кращі практики:
- Скористайтеся кнопкою
waitFororfindBy*запити в бібліотеці тестування React. - Імітація викликів fetch або API за допомогою
msw. - Віддавайте перевагу фальшиві таймери (
jest.useFakeTimers()) для ефектів, що залежать від часу очікування.
приклад:
test('loads and displays data', async () => {
render(<UserList />);
expect(await screen.findByText('Alice')).toBeInTheDocument();
});
Це гарантує, що тест очікує асинхронних оновлень React, перш ніж робити твердження.
40) Поясніть, як би ви спроектували масштабну, зручну для підтримки структуру проєкту React.
Відповідь:
Масштабований React-проект повинен поєднувати модульність, чіткість та командну співпрацю.
Рекомендована структура папок:
src/ ├── components/ # Reusable UI elements ├── features/ # Feature-specific modules ├── hooks/ # Custom reusable hooks ├── context/ # Global providers ├── pages/ # Route-level views ├── services/ # API and utilities ├── assets/ # Static resources ├── tests/ # Unit & integration tests └── index.js
Кращі практики:
- Використовуйте абсолютний імпорт із псевдонімами шляхів.
- Дотримуйтесь суворого утворення ворсу (ESLint + Prettier).
- Скористайтеся кнопкою TypeScript для безпеки типів.
- Забезпечте межі компонентів за допомогою атомарного проектування або зрізів на основі ознак.
приклад:
У реальних умовах функція «Користувач» може включати UserSlice.js, UserAPI.js, UserCard.jsx та User.test.js, все всередині src/features/user/.
🔍 Найпопулярніші питання на співбесіді щодо React.js з реальними сценаріями та стратегічними відповідями
1) Які ключові відмінності між функціональними та класовими компонентами в React.js?
Очікується від кандидата: Інтерв'юер хоче перевірити ваше розуміння архітектури компонентів React та сучасних передових практик.
Приклад відповіді:
«Функціональні компоненти простіші та покладаються на перехоплювачі для керування станом та методами життєвого циклу, тоді як компоненти класу використовують this та методи життєвого циклу, такі як componentDidMountФункціональні компоненти сьогодні зазвичай є кращими, оскільки вони сприяють чистішому коду, їх легше тестувати та вони працюють краще завдяки оптимізації процесу рендерингу React.
2) Чи можете ви пояснити, як працює віртуальний DOM у React?
Очікується від кандидата: Інтерв'юер хоче оцінити ваше розуміння основного механізму продуктивності React.
Приклад відповіді:
«Віртуальний DOM — це представлення реального DOM в оперативній пам’яті. Коли стан компонента змінюється, React спочатку оновлює віртуальний DOM, порівнює його з попередньою версією за допомогою процесу, який називається «порівняння», а потім оновлює лише ті частини реального DOM, які змінилися. Такий підхід покращує продуктивність, мінімізуючи прямі маніпуляції з DOM».
3) Як керувати станом у великомасштабному React-застосунку?
Очікується від кандидата: Інтерв'юер хоче дізнатися про ваш досвід роботи з методами та інструментами управління державою.
Приклад відповіді:
«У великих застосунках я зазвичай використовую централізовані бібліотеки керування станом, такі як Redux або Zustand. Redux забезпечує передбачуваний потік даних і спрощує налагодження завдяки інструментам налагодження з урахуванням подорожей у часі. Для простіших застосунків я надаю перевагу використанню Context API та перехоплювачів, щоб уникнути зайвої складності».
4) Опишіть випадок, коли ви оптимізували продуктивність React.
Очікується від кандидата: Інтерв'юер хоче зрозуміти ваш практичний досвід оптимізації продуктивності.
Приклад відповіді:
«На моїй попередній посаді наш застосунок надмірно перерендерувався через непотрібні зміни стану. Я використовував React.memo і useCallback гачок, щоб запобігти непотрібним повторним рендерингам. Я також проаналізував продуктивність за допомогою React Profiler та виявив компоненти, які потребували мемоізації, що скоротило час рендерингу майже на 30%.
5) Як ви обробляєте побічні ефекти в React?
Очікується від кандидата: Інтерв'юер хоче оцінити ваше розуміння гачків та управління життєвим циклом.
Приклад відповіді:
«Я обробляю побічні ефекти, такі як виклики API або маніпуляції з DOM, за допомогою useEffect гачок. Гачок дозволяє мені вказувати залежності, гарантуючи, що ефект буде виконуватися лише тоді, коли ці залежності зміняться. Це допомагає підтримувати передбачувану поведінку та уникати нескінченних циклів.
6) Розкажіть мені про складну помилку, з якою ви зіткнулися в React-проєкті, і як ви її вирішили.
Очікується від кандидата: Інтерв'юер хоче оцінити ваші навички вирішення проблем та усунення несправностей.
Приклад відповіді:
«На попередній посаді я зіткнувся з помилкою, через яку оновлення стану не відображалися в інтерфейсі користувача. Після дослідження я зрозумів, що проблема була спричинена безпосередньою зміною об’єкта стану замість створення нової копії. Я рефакторингував код, щоб використовувати незмінні оновлення, що вирішило проблему та покращило узгодженість даних».
7) Як ви обробляєте валідацію форм у React-застосунках?
Очікується від кандидата: Інтерв'юер хоче перевірити, чи розумієте ви, як реалізувати перевірку введених користувачем даних.
Приклад відповіді:
«Зазвичай я використовую контрольовані компоненти для керування вхідними даними форми, поєднуючи їх з бібліотеками, такими як Formik або React Hook Form, для валідації. Ці інструменти спрощують обробку помилок, керування станом форми та інтеграцію зі сторонніми бібліотеками валідації, такими як Yup».
8) Опишіть ситуацію, коли вам довелося співпрацювати з бекенд-розробниками під час роботи над React-проектом.
Очікується від кандидата: Інтерв'юер хоче оцінити ваші навички командної роботи та комунікації.
Приклад відповіді:
«На моїй попередній посаді я тісно співпрацював з розробниками бекенду для розробки REST API для додатку панелі інструментів. Ми узгодили формати даних та кінцеві точки на ранніх етапах розробки. Я також створював макетні відповіді для продовження розробки фронтенду під час створення бекенду, забезпечуючи безперебійну інтеграцію пізніше».
9) Як ви забезпечуєте можливість повторного використання та підтримки ваших React-компонентів?
Очікується від кандидата: Інтерв'юер хоче знати про ваш підхід до проектування компонентів та масштабованості.
Приклад відповіді:
«Я дотримуюся принципу створення невеликих, сфокусованих компонентів, які виконують одну відповідальність. Я також використовую props для гнучкості та дотримуюся модульного стилю за допомогою CSS-in-JS або styled-components. Це гарантує, що компоненти можна легко повторно використовувати та підтримувати протягом усього проєкту».
10) Як ви слідкуєте за тенденціями та передовим досвідом React.js?
Очікується від кандидата: Інтерв'юер хоче оцінити вашу відданість безперервному навчанню.
Приклад відповіді:
«Я слідкую за офіційною документацією React та блогами спільноти. Я також дивлюся доповіді з конференцій React, таких як React Conf, та слухаю подкасти, такі як «React Podcast». Ці ресурси допомагають мені бути в курсі нових функцій, таких як паралельний рендеринг та серверні компоненти».
