> Как использовать memo в React для предотвращения лишних рендеров (React)

React.memo - это компонент высшего порядка (HOC), который оптимизирует производительность, предотвращая повторный рендер компонента, если его пропсы не изменились. Он работает путём поверхностного сравнения предыдущих и новых пропсов.

Пример использования:

JSX
import React, { memo } from 'react';

const ExpensiveComponent = memo(({ name, age }) => {
  console.log('Рендер ExpensiveComponent');
  return <div>{name}, {age} лет</div>;
});

// В родительском компоненте:
function App() {
  const [count, setCount] = useState(0);
  const user = { name: 'Иван', age: 30 };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Счётчик: {count}</button>
      <ExpensiveComponent name={user.name} age={user.age} />
    </div>
  );
}

Ключевые моменты:

• memo сравнивает пропсы поверхностно (shallow comparison). Если передаёте объекты или массивы, они будут считаться новыми при каждом рендере родителя - используйте useMemo или useCallback для стабилизации ссылок.

• Применяйте memo только к компонентам, которые:

  • Часто ререндерятся без изменения пропсов.

  • Выполняют тяжёлые вычисления или рендерят большие списки.

• Не используйте memo для простых компонентов - накладные расходы на сравнение могут перевесить выгоду.

• Можно передать второй аргумент - функцию кастомного сравнения: memo(Component, (prevProps, nextProps) => { /* возвращает true, если пропсы равны */ }).

Антипаттерн: передача в memo компонента с пропсами-функциями без useCallback - функция будет создаваться заново каждый раз, и memo не сработает.