Что такое мемоизация и как её использовать?

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

В React мемоизация осуществляется с помощью хуков useMemo и useCallback:

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

import React, { useMemo } from 'react'; 

function Component({ items }) {
  	const sortedItems = useMemo(() => {
      		return items.sort(); // Тяжелая операция  
  	}, [items]);  
  
  	return <ul>{sortedItems.map(item => <li key={item}>{item}</li>)}</ul>; 
}

• useCallback: Этот хук используется для мемоизации функций. Он работает аналогично useMemo, но возвращает мемоизированную версию функции.

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

function ParentComponent() {
  	const [count, setCount] = useState(0); 
   
  	const increment = useCallback(() => {
      		setCount(c => c + 1);  
 	}, []);  
  
  	return <button onClick={increment}>Увеличить: {count}</button>; 
}

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