Співбесіда React змішує специфіку фреймворку — хуки, рендеринг, стан — з основами JavaScript, за якими видно, чи розумієте ви, що React робить під капотом. Нижче — найчастіші питання з еталонними відповідями.
До кожного питання — еталонна відповідь, з якою можна порівняти свою.
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 кодом і дуже великих форм, де рендер на кожне натискання клавіші надто дорогий.
useEffect виконується після того, як рендер закомічено на екран, і перезапускається, коли змінюється значення в масиві залежностей. Повернення функції з нього реєструє очищення, яке React викликає перед наступним запуском і при розмонтуванні — там скасовують підписки, таймери й незавершені запити. Відсутність очищення — типова причина витоків памʼяті й оновлень стану в розмонтованого компонента.
Prop drilling — це передача даних через компоненти, які їх не використовують, лише щоб дістатися глибокого нащадка. Context вирішує проблему для значень, справді глобальних для піддерева: тема, локаль, поточний користувач. Для часто змінюваних даних краще підходить стейт-бібліотека або композиція — передача елементів через children, бо context перемальовує всіх споживачів при кожній зміні.
=== порівнює значення й тип без перетворень, а == спершу зводить операнди до спільного типу, через що null == undefined істинно, і [] == false теж істинно. Coercion — це і є неявне приведення, і правила його достатньо складні, щоб мало хто памʼятав їх під тиском. Використовуйте === усюди; єдиний частий виняток — x == null, щоб зловити одразу null і undefined.
На співбесіді ти говориш вголос під тиском. Кем поставить ті самі питання, оцінить кожну відповідь і покаже, що саме підтягнути.
Пройти інтерв'ю React Frontend →