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

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

Хуки

Нет, если свойство изменено мутацией, перерисовки не будет: React узнаёт об обновлениях только через сеттер с новой ссылкой.

Механика отказа

const [settings, setSettings] = useState({ theme: 'dark', lang: 'ru' });

settings.theme = 'light';   // 1) мутация: React не уведомлён
setSettings(settings);      // 2) сеттер: Object.is(prev, next) → true → пропуск

Два барьера: без сеттера React вообще не в курсе; с сеттером, но той же ссылкой — проверка Object.is решает «ничего не изменилось» и пропускает рендер (bail out).

Что перерисовку вызовет

setSettings({ ...settings, theme: 'light' });         // новый объект
setSettings((prev) => ({ ...prev, theme: 'light' })); // то же, через prev

// массивы: новые копии вместо push/splice
setItems((prev) => [...prev, newItem]);
setItems((prev) => prev.filter((i) => i.id !== id));

Скрытые последствия мутаций

Мутация опасна не только пропущенным рендером:

  • если рендер случится по другой причине, UI покажет новое значение, но prev-значения для сравнений уже испорчены;
  • React.memo/PureComponent не увидят изменений в props;
  • зависимости useEffect/useMemo не сработают;
  • в StrictMode (двойной рендер) мутации дают расхождения.

Инструменты против мутаций

Immer для глубоких обновлений, Object.freeze в dev, ESLint-плагины, TypeScript readonly-типы.

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

Мутация свойства объекта в useState перерисовку не запускает: без сеттера React не уведомлён, с сеттером и той же ссылкой — отсекается проверкой Object.is. Обновлять только новой копией (spread/функциональная форма/Immer); мутации дополнительно ломают memo и зависимости хуков.

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