Как правильно обновить элемент в массиве объектов в state?

React определяет необходимость повторного рендера по изменению ссылки на объект состояния. Если мутировать массив или объект напрямую, ссылка останется прежней, и React может не заметить изменений. Поэтому обновление элемента в массиве объектов в state всегда выполняется иммутабельно: создаётся новая структура данных.

Базовый подход через map

Метод map возвращает новый массив, в котором можно заменить только нужный элемент, оставив остальные без изменений.

const [users, setUsers] = useState([
  { id: 1, name: 'Anna' },
  { id: 2, name: 'Boris' }
]);

function updateName(id, newName) {
  setUsers(prev => prev.map(user =>
    user.id === id
      ? { ...user, name: newName } // копия объекта с новым полем
      : user
  ));
}

Почему нельзя мутировать

• React сравнивает ссылки, а не содержимое, при решении о ререндере.
• Мутация ломает оптимизации PureComponent и React.memo.
• История изменений и откаты (undo/redo) становятся невозможными.

Вложенные структуры

Если объект внутри массива содержит вложенные поля, копировать нужно каждый уровень, который меняется.

setUsers(prev => prev.map(u =>
  u.id === id
    ? { ...u, address: { ...u.address, city: 'Moscow' } }
    : u
));

Альтернативы

Для сложных состояний удобно использовать useReducer или библиотеки вроде Immer, которые позволяют писать «мутирующий» код, но под капотом создают иммутабельные копии.

Итог: применяйте иммутабельное обновление через map и spread всегда, когда state содержит массивы или объекты — это гарантирует корректный ререндер и предсказуемое поведение приложения.