Як оновлювати об'єкти та масиви в state без мутацій?

Головне правило роботи зі state у бібліотеці React полягає в категоричній забороні на прямі мутації поточних даних. Якщо ви зміните властивість об'єкта чи елемент масиву «на місці», React просто не помітить цих змін, оскільки посилання на об'єкт у пам'яті залишиться колишнім, а отже, компонент не виконає повторний рендеринг і інтерфейс користувача залишиться старим.

Щоб оновлювати складні структури даних коректно та без побічних ефектів, необхідно завжди створювати їх нові копії. Для роботи з об'єктами використовується синтаксис оператора розширення, який дозволяє скопіювати старі властивості та перезаписати лише потрібні поля, наприклад через конструкцію setS(prev => ({ ...prev, a: 1 })).

Для додавання нових елементів до масивів також застосовується оператор spread, який розгортає старий масив у новий із додаванням елемента: setA(prev => [...prev, item]). Якщо ж вам потрібно видалити елемент із масиву без мутації вихідного списку, слід використовувати метод filter, який повертає абсолютно новий масив, що містить лише ті елементи, які задовольняють задану умову.

У тих випадках, коли структура стану стає занадто глибокою та вкладеною, ручне копіювання через оператори розширення може сильно захаращувати код. Для спрощення роботи з такими даними розробники часто підключають спеціалізовані бібліотеки, такі як Immer, яка дозволяє писати код так, ніби ви мутуєте дані безпосередньо, але під капотом створює безпечні незмінні копії.