Співбесіда React змішує специфіку фреймворку — хуки, рендеринг, стан — з основами JavaScript, за якими видно, чи розумієте ви, що React робить під капотом. Нижче — найчастіші питання з еталонними відповідями. Junior: базова теорія, визначення та прості практичні кейси.
Він каже React, які значення читає ефект, щоб ефект перезапускався лише за їхньої зміни. Порожній масив означає один запуск після монтування; відсутність масиву взагалі — запуск після кожного рендера, і саме так починаються нескінченні цикли. Пропустити використовуване значення — друга помилка: ефект замикається на застарілому значенні й користується ним вічно.
Key каже React, який елемент нового списку відповідає якому в старому, щоб можна було перемістити вузол, а не перезібрати його. Індекс це ламає, щойно список змінює порядок або елемент видаляють: React зіставляє за позицією, і потрібний стан лишається в непотрібного компонента — позначений чекбокс перестрибує на інший рядок.
Props приходять від батька і в компоненті, що їх отримує, доступні лише для читання. State належить компоненту, і його зміна викликає перемальовування. Якщо одне значення потрібне двом компонентам, його місце — у найближчому спільному батьку, звідки воно спускається пропсами; це й називають підняттям стану.
React вирішує, чи перемальовувати, порівнюючи старе значення з новим за посиланням. Push у масив посилання не змінює, тому React робить висновок, що нічого не сталося, і пропускає рендер — дані оновилися, екран ні. Замість мутації значення замінюють: новий масив, новий обʼєкт.
У контрольованого поля значення задається станом React, а onChange пише назад, тому стан — єдине джерело істини. У неконтрольованого значення живе в DOM і читається через ref. Контрольований беруть за замовчуванням, бо валідація, форматування та умовне блокування потребують значення під час рендера; неконтрольований потрібен там, де перемальовування на кожне натискання марнотратне.
React розрізняє хуки за порядком виклику, а не за іменем — перший useState у компоненті це завжди та сама комірка стану. Хук усередині if змінює цей порядок між рендерами, і React віддає не той стан не тому хуку. Звідси правило: викликати безумовно на верхньому рівні, а умову переносити всередину хука.
Він виходить достроково: якщо нове значення ідентичне поточному за Object.is, перемальовування не буде. Тому встановлення примітива в те саме число безкоштовне, а встановлення обʼєкта в структурно такий самий, але створений заново — ні: посилання інше, і React перемалює, хоча візуально нічого не змінилося.
На співбесіді ти говориш вголос під тиском. Кем поставить ті самі питання, оцінить кожну відповідь і покаже, що саме підтягнути.
Пройти інтерв'ю Junior React Frontend →