Співбесіда React змішує специфіку фреймворку — хуки, рендеринг, стан — з основами JavaScript, за якими видно, чи розумієте ви, що React робить під капотом. Нижче — найчастіші питання з еталонними відповідями. Senior: архітектуру, трейд-офи, менторство та прийняття рішень.
Замикання — це функція разом з областю видимості, у якій вона була створена, тому вона зберігає доступ до тих змінних і після виходу із зовнішньої функції. У 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.
На співбесіді ти говориш вголос під тиском. Кем поставить ті самі питання, оцінить кожну відповідь і покаже, що саме підтягнути.
Пройти інтерв'ю Senior React Frontend →