Как происходит сравнение props в React?

Как происходит сравнение props в React

Сравнение props — один из самых важных механизмов в React для определения, нужно ли перерендеривать компонент. Понимание этого процесса критично для оптимизации производительности приложения.

Поверхностное сравнение (Shallow Comparison)

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

// ПОВЕРХНОСТНОЕ СРАВНЕНИЕ
const obj1 = { name: 'John', age: 30 };
const obj2 = { name: 'John', age: 30 };

// Глубоко это разные объекты
console.log(obj1 === obj2); // false

// Но поверхностно мы проверяем каждое свойство
const isEqual = 
  obj1.name === obj2.name && 
  obj1.age === obj2.age; // true

// React делает примерно так
function shallowEqual(obj1, obj2) {
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  
  if (keys1.length !== keys2.length) return false;
  
  for (let i = 0; i < keys1.length; i++) {
    const key = keys1[i];
    if (obj1[key] !== obj2[key]) return false;
  }
  
  return true;
}

React.memo и сравнение props

React.memo использует поверхностное сравнение для решения, нужна ли перерендеринг:

// Без React.memo - компонент перерендеривается ВСЕГДА
function UserCard({ user }) {
  return <div>{user.name}</div>;
}

// С React.memo - перерендеринг только если props изменились
export const MemoizedUserCard = React.memo(UserCard);

// Пример использования
function App() {
  const [count, setCount] = useState(0);
  const user = { name: 'Alice', id: 1 };
  
  return (
    <div>
      <MemoizedUserCard user={user} />
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    </div>
  );
}

// ПРОБЛЕМА: каждый render создает новый объект user
// Поэтому React.memo не поможет, компонент все равно перерендеривается
const newUser1 = { name: 'Alice', id: 1 };
const newUser2 = { name: 'Alice', id: 1 };
console.log(newUser1 === newUser2); // false!!

Решение проблемы: useMemo для объектов

import { useMemo } from 'react';

function App() {
  const [count, setCount] = useState(0);
  
  // Сохраняем объект user только если его данные не изменились
  const user = useMemo(() => ({ name: 'Alice', id: 1 }), []);
  
  return (
    <div>
      <MemoizedUserCard user={user} />
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
    </div>
  );
}

// Теперь React.memo работает правильно
// UserCard не перерендеривается при клике на кнопку

Проблемы с функциями в props

То же самое касается функций - они создаются заново на каждый render:

// ПЛОХО: handleClick создается заново каждый раз
function Parent() {
  return (
    <MemoChild onClick={() => console.log('clicked')} />
  );
}

// Это эквивалентно:
const handleClick1 = () => console.log('clicked');
const handleClick2 = () => console.log('clicked');
console.log(handleClick1 === handleClick2); // false!

// ХОРОШО: используем useCallback
function Parent() {
  const handleClick = useCallback(() => {
    console.log('clicked');
  }, []); // зависимости
  
  return <MemoChild onClick={handleClick} />;
}

Сравнение массивов

// ПРОБЛЕМА: новый массив на каждый render
function Parent() {
  const tags = ['javascript', 'react', 'frontend'];
  return <MemoTag tags={tags} />;
}

// Каждый раз: tags === newTags => false
const tags1 = ['javascript', 'react'];
const tags2 = ['javascript', 'react'];
console.log(tags1 === tags2); // false

// РЕШЕНИЕ: useMemo
function Parent() {
  const tags = useMemo(() => ['javascript', 'react', 'frontend'], []);
  return <MemoTag tags={tags} />;
}

Пользовательское сравнение в React.memo

const UserCard = React.memo(
  ({ user, theme }) => {
    return <div className={theme}>{user.name}</div>;
  },
  // Функция сравнения (возвращает true если props ОДИНАКОВЫ)
  (prevProps, nextProps) => {
    // Сравниваем только name, игнорируем остальное
    return prevProps.user.name === nextProps.user.name;
  }
);

// Или используем стандартное поверхностное сравнение
const FullComparison = React.memo(Component);
// это эквивалентно
const ExplicitComparison = React.memo(
  Component,
  (prev, next) => {
    const prevKeys = Object.keys(prev);
    const nextKeys = Object.keys(next);
    
    if (prevKeys.length !== nextKeys.length) return false;
    
    return prevKeys.every(key => prev[key] === next[key]);
  }
);

Сравнение в useEffect зависимостях

Тот же принцип поверхностного сравнения применяется к зависимостям useEffect:

function MyComponent({ userId, userName }) {
  useEffect(() => {
    // Загружаем данные пользователя
    fetchUser(userId);
  }, [userId]); // Сравниваем по ===
  
  // ПРОБЛЕМА: объект создается заново каждый раз
  useEffect(() => {
    const config = { userId, userName };
    updateConfig(config);
  }, [config]); // config всегда разный объект!
  
  // РЕШЕНИЕ: перечислить примитивные зависимости
  useEffect(() => {
    const config = { userId, userName };
    updateConfig(config);
  }, [userId, userName]); // Теперь правильно
  
  // ИЛИ использовать useMemo
  const config = useMemo(() => ({ userId, userName }), [userId, userName]);
  useEffect(() => {
    updateConfig(config);
  }, [config]);
}

Сложный пример: оптимизация списка

const ListItem = React.memo(({ item, onDelete }) => {
  return (
    <div>
      {item.title}
      <button onClick={() => onDelete(item.id)}>Delete</button>
    </div>
  );
});

function List({ items, onDeleteItem }) {
  return (
    <ul>
      {items.map(item => (
        <ListItem 
          key={item.id}
          item={item}
          onDelete={onDeleteItem} // ПРОБЛЕМА: новая функция каждый раз
        />
      ))}
    </ul>
  );
}

// ОПТИМИЗИРОВАННАЯ ВЕРСИЯ
function OptimizedList({ items, onDeleteItem }) {
  const handleDelete = useCallback((id) => {
    onDeleteItem(id);
  }, [onDeleteItem]); // Зависит от prop, который может меняться
  
  const memoizedItems = useMemo(() => items, [items]);
  
  return (
    <ul>
      {memoizedItems.map(item => (
        <ListItem 
          key={item.id}
          item={item}
          onDelete={handleDelete}
        />
      ))}
    </ul>
  );
}

Сравнение в разных версиях React

React 16-17: Используют поверхностное сравнение в React.memo и в hooks

React 18+: Добавлены улучшения, но принцип остается тот же

Лучшие практики

1. Помни о поверхностном сравнении - объекты и массивы всегда разные при поверхностном сравнении
2. Используй useMemo для объектов и массивов в props
3. Используй useCallback для функций передаваемых как props
4. Избегай создания объектов inline если они идут как props к мемоизированным компонентам
5. Тестируй производительность перед оптимизацией - не всегда React.memo нужен
6. Профилируй с React DevTools Profiler чтобы увидеть реальные перерендеры