1. Мета

useMemo: Оптимізує витратні обчислення шляхом запам'ятовування результату функції.

useCallback: Оптимізує зворотні виклики (callback), запам'ятовуючи саму функцію, уникаючи її перевизначення.

2. Значення, що повертається

useMemo: Повертає значення обчислення.

useCallback: Повертає функцію.

3. Коли використовувати

useMemo: Використовуйте, коли маєте витратні обчислення або похідні дані, які не потрібно перераховувати при кожному рендері.

useCallback: Використовуйте, коли потрібно запобігти перевизначенню функції без потреби (корисно при передачі зворотних викликів (callback) в дочірні компоненти).

4. Приклад

Приклад 4.1: useMemo

Випадок використання: Запам'ятовування похідного значення від витратного обчислення.

import React, { useMemo, useState } from "react";  
function ExpensiveComputation({ num }) {  
 // Імітація витратного обчислення  
 const computeFactorial = (n) => {  
 console.log("Обчислення факторіала...");  
 if (n === 0) return 1;  
 return n * computeFactorial(n - 1);  
 };  

 const factorial = useMemo(() => computeFactorial(num), [num]);  

 return 
Factorial of {num} is {factorial}
;  
}  
function App() {  
 const [number, setNumber] = useState(5);  
 const [count, setCount] = useState(0);  

 return (    
 setNumber((prev) => prev + 1)}>Increment Number    
 setCount((prev) => prev + 1)}>Increment Count    
 );  
}  

export default App;  

Пояснення:
- Обчислення факторіала виконується лише тоді, коли number змінюється, що дозволяє уникнути непотрібних перерахунків, коли оновлюється count.

Приклад 4.2: useCallback

Випадок використання: Запам'ятовування зворотного виклику (callback), щоб запобігти його перевизначенню.

import React, { useState, useCallback } from "react";  
function Child({ onClick }) {  
 console.log("Дочірній компонент змальовано");  
 return Click Me;  
}  

function App() {  
 const [count, setCount] = useState(0);  

 const handleClick = useCallback(() => {  
 console.log("Кнопка натиснута");  
 }, []); // Залежності (пусті в даному випадку)  

 return (    
Count: {count}
 setCount((prev) => prev + 1)}>Increment Count    
 );  
}  

export default App;  

Пояснення:
- Функція handleClick запам'ятовується, тому не перевизначається, коли батьківський компонент (App) перерендиться. Це запобігає непотрібним рендерам дочірнього компонента (Child).

Ключові висновки

• useMemo: Запам'ятовує значення для оптимізації витратних обчислень.
• useCallback: Запам'ятовує функції для запобігання непотрібному перевизначенню.
• Схожості: Обидва інструменти покращують продуктивність, кешуючи результати або функції.
• Відмінності: useMemo використовується для обчислених значень, а useCallback — для функцій.

Перекладено з: Difference between useMemo and useCallback with example.