Отличие useMemo от useCallback.

Хуки useMemo и useCallback используются для оптимизации производительности в функциональных компонентах React, но они решают разные задачи.

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

import React, { useMemo } from 'react';

function App({ number }) {
 	const computedValue = useMemo(() => {
   		// Долгий расчет
   		return number * 2;
 	}, [number]);

 	return <div>{computedValue}</div>;
}

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

import React, { useCallback } from 'react';

function App() {
 	const handleClick = useCallback(() => {
   		console.log('Button clicked!');
 	}, []);

 	return <button onClick={handleClick}>Click me</button>;
}

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

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