> Как правильно использовать мемоизацию в React (React)

Мемоизация в React - это техника оптимизации, которая предотвращает повторные вычисления или перерисовки компонентов, если входные данные (пропсы, состояние или зависимости) не изменились. Основные инструменты:

1. React.memo - для мемоизации целого компонента. Оборачивает компонент и сравнивает пропсы поверхностно (shallow comparison). Если пропсы не изменились, компонент не перерисовывается.
   Пример:

   JSX
   const MyComponent = React.memo(({ data }) => <div>{data}</div>);

2. useMemo - для мемоизации вычисляемых значений. Принимает функцию и массив зависимостей. Результат функции кешируется до изменения зависимостей.
   Пример:

   JSX
   const sortedList = useMemo(() => list.sort((a, b) => a - b), [list]);

3. useCallback - для мемоизации функций. Полезно, когда функция передаётся как пропс в дочерний компонент, обёрнутый в React.memo.
   Пример:

   JSX
   const handleClick = useCallback(() => setCount(prev => prev + 1), []);

Важные правила:

• Не мемоизируйте всё подряд - это добавляет накладные расходы на сравнение. Используйте только при реальных проблемах производительности (например, тяжёлые вычисления или частые ререндеры).

• Убедитесь, что зависимости в useMemo/useCallback указаны корректно, иначе получите баги с устаревшими данными.

• Для примитивных пропсов (строки, числа) React.memo работает эффективно; для объектов/массивов - только если они создаются заново редко.

Антипаттерны:

• Мемоизация в компоненте, который и так редко перерисовывается.

• Использование useMemo для простых операций (например, a + b), где кеширование дороже самого вычисления.

Правильный подход: профилируйте приложение (React DevTools, Profiler) и применяйте мемоизацию только к узким местам.