Співбесіда React змішує специфіку фреймворку — хуки, рендеринг, стан — з основами JavaScript, за якими видно, чи розумієте ви, що React робить під капотом. Нижче — найчастіші питання з еталонними відповідями. Junior: базова теорія, визначення та прості практичні кейси.
Virtual DOM — це дерево елементів у памʼяті, яке React порівнює з попереднім, щоб обчислити мінімальний набір операцій над справжнім DOM. Reconciliation іде по вузлах: інший тип елемента відкидає все піддерево, а проп key підказує React, які діти перемістилися, а не змінилися. Цінність не в чистій швидкості — вона в тому, що ви описуєте цільовий стан, а React сам виводить потрібні мутації.
Хуки мають викликатися на верхньому рівні компонента або кастомного хука і в однаковому порядку на кожному рендері. React зберігає стан хуків у масиві, індексованому порядком виклику, тому умовний хук зсуває всі наступні індекси, і компонент починає читати стан чужого хука. Саме тому існує правило лінтера — падіння тут тихе і вкрай заплутане.
useMemo кешує обчислене значення, useCallback кешує ідентичність функції, а React.memo пропускає повторний рендер компонента, якщо пропси поверхнево рівні. Вони працюють у звʼязці: мемоїзувати колбек безглуздо, якщо дитина не загорнута в React.memo. Усі три коштують памʼяті й часу на порівняння, тому застосовувати їх треба до виміряних проблем, а не за замовчуванням.
Замикання — це функція разом з областю видимості, у якій вона була створена, тому вона зберігає доступ до тих змінних і після виходу із зовнішньої функції. У React цим пояснюється застарілий стан: ефект або колбек захоплює значення стану з того рендера, у якому був створений, і заведений один раз інтервал продовжує читати початкове значення. Лікується функціональним оновленням стану або додаванням залежності в ефект.
Стек викликів виконує синхронний код до кінця, потім event loop повністю вичерпує чергу мікрозадач — колбеки промісів і queueMicrotask — і лише потім бере одну макрозадачу на кшталт таймера або I/O-колбека. Тому ланцюжок промісів розвʼязується раніше, ніж setTimeout з нульовою затримкою. Цим же пояснюється, чому нескінченний потік мікрозадач заморожує відмальовування, а ланцюжок таймерів — ні.
Ключі дозволяють React зіставити дітей між рендерами, щоб переміщувати вузли DOM, а не перестворювати їх, зберігаючи стан і фокус. Індекс масиву ламає це при переупорядкуванні або вставці, бо індекс 0 тепер вказує на інший елемент — React перевикористовує не той вузол DOM, і стан компонента опиняється не в тому рядку. Правильний ключ — стабільний ідентифікатор з даних.
Керований інпут бере значення зі стану React і оновлюється через onChange, тому стан лишається єдиним джерелом правди, а валідація й форматування робляться прямолінійно. Некерований зберігає значення в DOM, і ви читаєте його через ref за потреби. Керований — вибір за замовчуванням; некерований підходить для файлових інпутів, інтеграції з не-React кодом і дуже великих форм, де рендер на кожне натискання клавіші надто дорогий.
На співбесіді ти говориш вголос під тиском. Кем поставить ті самі питання, оцінить кожну відповідь і покаже, що саме підтягнути.
Пройти інтерв'ю Junior React Frontend →