Привіт, друже, це канал про корисності в ІТ🤘
🔺Даємо практичні матеріали з RoR, JavaScript, QA, DevOps
🔺Розкажемо як знайти першу роботу без хвилювань та проблем
✍️Для звʼязку-@klimenko_nataly
👉 Відкриті вакансії - www.codica.com/careers
Post #5172
118
2. Чому key={index} може призвести до проблем зі state?
📌 Питання:
Є список:
У
Що може статися після видалення або сортування елементів?
📌 Очікувана відповідь:
Наприклад:
До:
Після видалення Alice:
React використовує
Після видалення Alice той самий
Через це локальний
Тому для списків, які можуть змінювати порядок, краще використовувати стабільний ID:
📌 Важливий нюанс:
Він допомагає React визначати identity елементів між render’ами та правильно пов‘язувати з ними
3. Чи завжди useCallback покращує performance?
📌 Питання:
Чи обов’язково тут потрібен
📌 Очікувана відповідь:
Не обов‘язково.
У цьому прикладі він може бути корисним разом із
Але якщо стабільна reference функції ні на що не впливає,
Тому не варто автоматично додавати:
до кожного компонента.
📌 А що із сучасним React?
У проєктах із React Compiler багато memoization-оптимізацій React може виконувати автоматично.
Це зменшує потребу вручну додавати
Тому хороша відповідь на рівні senior звучить приблизно так:
«Спочатку я визначаю, чи потрібна тут memoization взагалі. Якщо проєкт використовує React Compiler, значну частину таких оптимізацій він може виконати автоматично. Ручну memoization додаю, коли для цього є конкретна причина».
📌 Питання:
Є список:
{users.map((user, index) => (
<UserRow key={index} user={user} />
))}
У
UserRow є локальний state:
function UserRow({ user }) {
const [isEditing, setIsEditing] = useState(false);
return (
<>
<span>{user.name}</span>
<button onClick={() => setIsEditing(true)}>
Edit
</button>
{isEditing && <input />}
</>
);
}
Що може статися після видалення або сортування елементів?
📌 Очікувана відповідь:
index — це позиція елемента, а не його стабільна ідентичність.Наприклад:
До:
Alice Bob Charlie
0 1 2
Після видалення Alice:
Bob Charlie
0 1
React використовує
key, щоб зіставляти елементи між render’ами.Після видалення Alice той самий
key={0} уже належить Bob. Для React це означає, що компонент із key 0 залишився тим самим, хоча на рівні наших даних це вже інший користувач.Через це локальний
state компонента може «переїхати» до іншої сутності.Тому для списків, які можуть змінювати порядок, краще використовувати стабільний ID:
{users.map(user => (
<UserRow key={user.id} user={user} />
))}
📌 Важливий нюанс:
key — це не просто спосіб прибрати warning у консолі.Він допомагає React визначати identity елементів між render’ами та правильно пов‘язувати з ними
state.3. Чи завжди useCallback покращує performance?
📌 Питання:
Чи обов’язково тут потрібен
useCallback?
function Parent() {
const [count, setCount] = useState(0);
const handleClick = useCallback(() => {
console.log('click');
}, []);
return (
<>
<button onClick={() => setCount(c => c + 1)}>
{count}
</button>
<Child onClick={handleClick} />
</>
);
}
const Child = React.memo(function Child({ onClick }) {
return <button onClick={onClick}>Child</button>;
});
📌 Очікувана відповідь:
Не обов‘язково.
useCallback дозволяє зберігати ту саму function reference між render’ами, доки його dependencies не змінилися.У цьому прикладі він може бути корисним разом із
React.memo: Child отримує ту саму reference handleClick, тому незмінний onClick не змушує memoized-компонент render’итися повторно.Але якщо стабільна reference функції ні на що не впливає,
useCallback може бути просто зайвою memoization.Тому не варто автоматично додавати:
useCallback(...)useMemo(...)React.memo(...)до кожного компонента.
📌 А що із сучасним React?
У проєктах із React Compiler багато memoization-оптимізацій React може виконувати автоматично.
Це зменшує потребу вручну додавати
useCallback, useMemo і React.memo лише заради оптимізації render’ів.Тому хороша відповідь на рівні senior звучить приблизно так:
«Спочатку я визначаю, чи потрібна тут memoization взагалі. Якщо проєкт використовує React Compiler, значну частину таких оптимізацій він може виконати автоматично. Ручну memoization додаю, коли для цього є конкретна причина».
