Как оптимизировать хуки с useMemo

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

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

import React, { useMemo } from 'react';



function ExpensiveCalculationComponent({ input }) {

  const result = useMemo(() => {

    // Сложная вычисляемая логика

    return expensiveCalculation(input);

  }, [input]); // Зависимость



  return <div>Результат: {result}</div>;

}

Здесь useMemo обертка возвращает результат expensiveCalculation только в случае, если input изменился. Это предотвращает ненужные вызовы функции при каждом рендере компонента.

Когда использовать useMemo

useMemo полезен, когда:

1. Функция выполняет ресурсоемкие вычисления. Например, подсчеты на основе большого массива данных или сложные математические операции.
2. Компонент часто рендерится, но вычисляемые данные не меняются так же часто. Это помогает минимизировать нагрузку на процессор.
3. Мемоизация улучшает производительность. Если оптимизация рендеринга приводит к заметному увеличению скорости, useMemo станет отличным инструментом.

Пример с фильтрацией данных:

import React, { useMemo } from 'react';



function FilteredList({ items, filterTerm }) {

  const filteredItems = useMemo(() => {

    return items.filter(item => item.includes(filterTerm));

  }, [items, filterTerm]);



  return (

    <ul>

      {filteredItems.map((item, index) => (

        <li key={index}>{item}</li>

      ))}

    </ul>

  );

}

В этом примере массив items фильтруется только тогда, когда изменяется сам массив или filterTerm. Это особенно полезно при работе с большими наборами данных.

Лучшая практика использования useMemo

1. Не злоупотребляйте useMemo. Использование useMemo для легких вычислений может привести к усложнению кода без ощутимой выгоды.
2. Следите за зависимостями. Правильное определение зависимостей крайне важно. Если указать их неправильно, хук может либо никогда не обновляться, либо обновляться слишком часто.
3. Используйте useMemo совместно с useCallback. Это особенно полезно для передачи мемоизированных функций в дочерние компоненты, чтобы избежать их ненужного перерисовывания.

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

import React, { useMemo, useCallback } from 'react';



function ParentComponent({ items }) {

  const calculateSum = useCallback(() => {

    return items.reduce((sum, item) => sum + item.value, 0);

  }, [items]);



  const sum = useMemo(() => calculateSum(), [calculateSum]);



  return <div>Сумма: {sum}</div>;

}

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