Как React Hooks сравнивают deps между собой

React Hooks используют поверхностное сравнение (shallow comparison) для проверки изменений в массиве зависимостей. Это означает, что сравниваются ссылки на объекты/массивы, а не их содержимое.

const prevDeps = [1, {a: 2}];
const nextDeps = [1, {a: 2}]; 
// Будет считаться изменением, так как объекты разные по ссылке

Важные нюансы:

1. Примитивы сравниваются по значению
2. Объекты/массивы сравниваются по ссылке
3. Если передать новый массив с теми же значениями - хук сработает снова
4. Для объектов лучше выносить вычисления в useMemo

Пример проблемы:

useEffect(() => {
  // Срабатывает при каждом рендере
}, [{id: 1}]);

Решение:

const config = useMemo(() => ({id: 1}), []);
useEffect(() => {
  // Сработает только один раз
}, [config]);