PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Вызовется ли рендер при изменении свойства объекта записанного в useState?

Хуки

Если «изменение свойства» — это мутация объекта, лежащего в useState, то рендер не вызовется. Это одна из самых частых ошибок в React.

Почему не вызовется

const [user, setUser] = useState({ name: 'Аня', age: 25 });

const handleClick = () => {
  user.age = 26;      // мутация: объект изменился, но...
  // ...React об этом НЕ ЗНАЕТ: сеттер не вызван
};

React запускает обновление только через вызов сеттера. Мутация — обычная запись в поле объекта, никаких «наблюдателей» на state-объектах нет.

Не поможет и сеттер с тем же объектом:

user.age = 26;
setUser(user); // Object.is(user, user) === true → обновление ПРОПУЩЕНО

Сеттер сравнивает старое и новое значение по ссылке — она не изменилась.

Как правильно

Создать новый объект:

setUser({ ...user, age: 26 });                    // новая ссылка → рендер
setUser((prev) => ({ ...prev, age: prev.age + 1 })); // надёжнее через prev

// вложенные структуры — копируются по пути изменения:
setState((prev) => ({
  ...prev,
  profile: { ...prev.profile, city: 'Москва' },
}));

Для глубоких структур удобен Immer (produce), где «мутации» превращаются в иммутабельные копии.

Дополнительная опасность мутаций

Даже если рендер случится позже по другой причине, мутации ломают React.memo, зависимости эффектов и историю состояний — изменения «невидимы» для всех механизмов сравнения.

Коротко для собеседования

Нет: мутация свойства не вызывает рендер (React не следит за объектами), и setUser с тем же объектом тоже — Object.is видит ту же ссылку. Рендер будет только при передаче в сеттер нового объекта (spread/Immer). Поэтому состояние в React обновляется строго иммутабельно.

Другие вопросы раздела