Как отслеживание зависимостей в useEffect определяет, изменилось ли значение между рендерами?

Как работает отслеживание зависимостей в useEffect

React сравнивает текущие значения зависимостей с предыдущими при каждом рендере. Для этого используется строгое равенство (Object.is), которое аналогично оператору ===, но с учетом NaN. Если хотя бы одна зависимость изменилась, эффект запускается повторно.

Пример с примитивами и объектами

const [count, setCount] = useState(0);
const [user, setUser] = useState({ name: 'Alice' });

useEffect(() => {
  console.log('Эффект выполнен');
}, [count, user]);

// При setCount(1) — эффект выполнится (count изменился)
// При setUser({ name: 'Alice' }) — эффект выполнится (новая ссылка на объект)

Для примитивов (числа, строки) сравнение происходит по значению. Для объектов и массивов — по ссылке. Поэтому изменение свойства объекта без создания нового объекта не вызовет эффект.

Практическое применение

Этот механизм критичен для оптимизации производительности. Если передать в зависимости массив, который создается заново при каждом рендере, эффект будет выполняться каждый раз. Чтобы избежать этого, используют useMemo или useCallback для стабилизации ссылок.

Вывод: Понимание поверхностного сравнения зависимостей помогает избежать бесконечных циклов и лишних вызовов эффектов, что особенно важно в сложных React-приложениях.