Товарищи.. Возникла проблема, не могу понять фишки хуков useCallback и UseMemo. Читал уже доку и пару разных статей, но нет четкой картины для чего это нужно, какая от этого польза, в какой фазе это происходит. Буду признателен за любое доходчивое объяснение.
2 ответа
Начнем с useCallback
Давайте напишем самую простую функцию счетчик.
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<p>counter: {count}</p>
<button
onClick={_ => setCount(prevCount => prevCount + 1)}>
increment</button>
</div>
);
}
Добавим туда функцию, которая выводит на консоль текст
function App() {
const [count, setCount] = useState(0);
const helloConsole = _ => {
console.log("hi chaps :)");
};
helloConsole();
return (
<div className="App">
<p>counter: {count}</p>
<button
onClick={_ => setCount(prevCount => prevCount + 1)}>
increment</button>
</div>
);
}
Теперь при каждом увеличении счетчика это функция helloConsole
будет заново создаваться.
То есть
Первый render
function App() {
const count = 0;
const helloConsole = _ => {
console.log("hi chaps :)");
};
helloConsole();
//...
Второй render
function App() {
const count = 1;
const helloConsole = _ => {
console.log("hi chaps :)");
};
helloConsole();
//...
Третий render
function App() {
const count = 2;
const helloConsole = _ => {
console.log("hi chaps :)");
};
helloConsole();
//...
И функция helloConsole
из первого render-а НЕ равен функции из второго render-а и т.д. При каждом рендере создаётся новая функция helloConsole
с новой ссылкой.
// 1 count ------- 2 count //
helloConsole !== helloConsole
И тут надо подумать что будет если на реальном проекте у вас будет такая функция которая каждый раз пересоздаётся и внутри 500 строк кода делает определенные вычисления. Я думаю производительность этого компонента упадет.И даже в зависимости от ситуации и кода можно будет заметить это невооруженным глазом.
Решение
useCallback
Надо обернуть вашу функцию в useCallback
и добавить массив зависимостей.
const anyFunc = useCallback(() => {
// 500 строк кода
}, [dependencies]);
ВАЖНЫЕ ЗАМЕЧАНИЕ
1.Не надо использовать useCallback
без массива зависимостей.
const anyFunc = useCallback(() => {
// любой код
}, []);
Так писать НЕ надо. Тут вы больше потеряете чем, получите. Если нет массива зависимостей просто напишите функцию за пределы компонента. Как то так.
const anyFunc = () => {
// любой код
};
function App () { // наш компонент
Этот код идентичен useCallback
без массива зависимостей. Советую использовать именно второй подход если массив useCallback
пустой.
2.Не надо использовать useCallback везде где можно использовать.
const handleClick = useCallback(() => {
// обработать события клика
}, []);
Опять же в таком коде вы потеряете больше чем, получите. Ваш компонент станет медленнее.
Вот тут можно посмотреть как работает компонент с и без useCallback
Хук useMemo
В отличие от useCallback
которой мемоизирует только коллбэки useMemo
мемоизирует все.
const List = React.useMemo(() =>
listOfItems.map(item => ({
...item,
itemProp1: expensiveFunction(props.first),
itemProp2: anotherPriceyFunction(props.second)
})), [listOfItems]
)
Пример взят отсюда
В этом случае useMemo
возвращает массив.
В ссылке наверху который я указал написано
If you implement useMemo too often in an application, it can harm the performance.
Если вы будете использовать useMemo
часто это может нанести вред по быстродействии приложения.
Это значит второе замечание которое я написал наверху для useCallback
актуально и для useMemo
.
Также если вы попытаетесь мемоизировать коллбэк в useMemo это будет идентично использованию useCallback
useCallback(fn, deps) — это эквивалент useMemo(() => fn, deps).
useCallback
запоминает функцию и не пересоздаёт её заново в целях оптимизации.
useMemo
запоминает значение и не пересчитывает его (сложные математические вычисления), также для оптимизации.
Применяется в зависимости от того что нужно: функция или значение.