Question 1

Чим props відрізняються від state у React?

Accepted Answer

Props компонент отримує від батька, і для нього вони лише для читання. State це внутрішні дані компонента, якими він керує сам через useState або useReducer. Зміна state або нових props спричиняє повторний рендер. Якщо дані можна обчислити з props, окремий state для них не потрібен.

Question 2

Навіщо потрібен key при рендері списків?

Accepted Answer

key допомагає React зіставити елементи списку між рендерами і зрозуміти, що додали, видалили чи переставили. Ключ має бути стабільним і унікальним серед сусідів, найкраще id з даних. Індекс масиву як ключ ламає стан елементів і анімації, коли список сортують, фільтрують або вставляють елементи на початок. Без ключа React покаже попередження в консолі.

Question 3

Як працює useEffect і що означає масив залежностей?

Accepted Answer

useEffect запускає побічний ефект після рендеру: запит, підписку, таймер. Без масиву залежностей ефект виконується після кожного рендеру, з порожнім масивом лише після монтування, а зі значеннями тоді, коли якесь із них змінилось. Функція, яку повертає ефект, це cleanup: React викликає її перед наступним запуском ефекту і при розмонтуванні. У cleanup відписуються, очищають таймери і скасовують запити.

Question 4

Що таке контрольовані та неконтрольовані поля форми?

Accepted Answer

У контрольованому полі значення зберігається в state і передається через value, а зміни приходять через onChange. Так React є єдиним джерелом правди, і легко робити валідацію чи форматування під час введення. У неконтрольованому полі значення живе в DOM, його читають через ref або з події submit, а початкове задають через defaultValue. Неконтрольовані поля простіші й рендеряться рідше, але гірше підходять для складної логіки.

Question 5

Як передати дані між двома сусідніми компонентами?

Accepted Answer

Спільний state піднімають до найближчого спільного батька і передають униз через props разом із функціями для його зміни. Якщо дані потрібні глибоко в дереві й прокидання props стає незручним, використовують Context. Context підходить для рідко змінних даних на кшталт теми чи поточного користувача. Для складного глобального стану беруть окрему бібліотеку, наприклад Zustand або Redux.

Question 6

Що змушує компонент рендеритися повторно?

Accepted Answer

Компонент рендериться знову, коли змінюється його state, коли рендериться батько або коли змінюється Context, який він читає. Рендер батька за замовчуванням рендерить усіх дітей, навіть якщо їхні props не змінились. React.memo пропускає рендер, якщо props поверхнево рівні. Рендер ще не означає зміну DOM: React оновлює DOM лише там, де результат відрізняється.

Question 7

Навіщо потрібні useMemo і useCallback? Коли їх не варто використовувати?

Accepted Answer

useMemo запам'ятовує результат обчислення, а useCallback саму функцію, доки не зміняться залежності. Вони корисні для дорогих обчислень і для стабільних посилань, які передають у React.memo компоненти або в залежності useEffect. Мемоізація має свою ціну: пам'ять і порівняння залежностей. Обгортати все підряд немає сенсу, спершу варто знайти реальну проблему в профайлері.

Question 8

Що таке reconciliation і як React вирішує, що оновити в DOM?

Accepted Answer

Reconciliation це процес порівняння нового дерева елементів із попереднім. React порівнює дерева евристично: якщо тип елемента на тому ж місці змінився, піддерево знищується і створюється заново разом зі станом. Якщо тип той самий, React оновлює лише змінені атрибути і рекурсивно йде в дітей. Для списків він зіставляє елементи за key, а потім застосовує мінімальний набір змін до DOM.

Питання на співбесіді з React

Питання рівня Junior

1. Чим props відрізняються від state у React?

2. Навіщо потрібен `key` при рендері списків?

3. Як працює `useEffect` і що означає масив залежностей?

4. Що таке контрольовані та неконтрольовані поля форми?

5. Як передати дані між двома сусідніми компонентами?

Питання рівня Middle

1. Що змушує компонент рендеритися повторно?

2. Навіщо потрібні `useMemo` і `useCallback`? Коли їх не варто використовувати?

3. Що таке reconciliation і як React вирішує, що оновити в DOM?

Тренуй ці питання

Відповідай уголос і отримуй оцінку

Інші теми

Розділи платформи