Будет ли ре-рендер компонента, если в useState записывается новый объект с теми же данными?

Почему происходит ре-рендер при передаче нового объекта с теми же данными?

В React функция useState возвращает массив из двух элементов: текущее состояние и функцию для его обновления. Когда вы вызываете функцию обновления с новым значением, React сравнивает предыдущее состояние с новым с помощью оператора строгого равенства (===). Для примитивных типов (числа, строки, булевы значения) сравнение происходит по значению. Для объектов и массивов — по ссылке.

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

Пример кода

import React, { useState } from 'react';

function UserComponent() {
  const [user, setUser] = useState({ name: 'Alice', age: 30 });

  const updateUser = () => {
    // Создаем новый объект с теми же данными
    setUser({ name: 'Alice', age: 30 });
  };

  console.log('Re-render!');

  return (
    <div>
      <p>{user.name}, {user.age}</p>
      <button onClick={updateUser}>Update</button>
    </div>
  );
}

При каждом клике на кнопку будет выводиться 'Re-render!', так как каждый раз создается новый объект.

Как избежать лишних ре-рендеров?

Если вы хотите избежать ре-рендера при неизменных данных, нужно передавать ту же самую ссылку на объект. Например, можно хранить объект в переменной вне компонента или использовать useMemo для мемоизации.

const initialUser = { name: 'Alice', age: 30 };

function UserComponent() {
  const [user, setUser] = useState(initialUser);

  const updateUser = () => {
    // Передаем ту же ссылку
    setUser(initialUser);
  };
  // ...
}

В этом случае ре-рендер не произойдет, так как ссылка не изменилась.

Вывод

Понимание ссылочной идентичности важно для оптимизации производительности React-приложений. Если вы не хотите вызывать ре-рендер при неизменных данных, всегда используйте одну и ту же ссылку на объект или массив.