In welchem Fall und warum wird React Hook useMemo zur Optimierung der Komponentenleistung verwendet?

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

Например, если у вас есть функция, которая фильтрует или сортирует большой массив, и вы хотите, чтобы она выполнялась только тогда, когда изменяются входные данные, useMemo позволит сохранить результат и повторно использовать его при последующих рендерах:

import React, { useMemo } from 'react';

function MyComponent({ items, filter }) {
  const filteredItems = useMemo(() => {
    return items.filter(item => item.includes(filter));
  }, [items, filter]);

  return (
    <ul>
      {filteredItems.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

Здесь useMemo гарантирует, что фильтрация массива произойдет только при изменении items или filter, а не при каждом рендере компонента.