What's the difference between useCallback and useMemo - reactjs

Question

Maybe I misunderstood something, but useCallback Hook runs everytime when re-render happens.
I passed inputs - as a second argument to useCallback - non-ever-changeable constants - but returned memoized callback still runs my expensive calculations at every render (I'm pretty sure - you can check by yourself in the snippet below).
I've changed useCallback to useMemo - and useMemo works as expected — runs when passed inputs changes. And really memoizes the expensive calculations.
Live example:
'use strict';
const { useState, useCallback, useMemo } = React;
const neverChange = 'I never change';
const oneSecond = 1000;
function App() {
const [second, setSecond] = useState(0);
// This 👇 expensive function executes everytime when render happens:
const calcCallback = useCallback(() => expensiveCalc('useCallback'), [neverChange]);
const computedCallback = calcCallback();
// This 👇 executes once
const computedMemo = useMemo(() => expensiveCalc('useMemo'), [neverChange]);
setTimeout(() => setSecond(second + 1), oneSecond);
return `
useCallback: ${computedCallback} times |
useMemo: ${computedMemo} |
App lifetime: ${second}sec.
`;
}
const tenThousand = 10 * 1000;
let expensiveCalcExecutedTimes = { 'useCallback': 0, 'useMemo': 0 };
function expensiveCalc(hook) {
let i = 0;
while (i < tenThousand) i++;
return ++expensiveCalcExecutedTimes[hook];
}
ReactDOM.render(
React.createElement(App),
document.querySelector('#app')
);
<h1>useCallback vs useMemo:</h1>
<div id="app">Loading...</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

Answer 1

useMemo is intended to run the function and return a value at when the component renders (assuming one of the dependancies has changed). useCallback is intended to return a (memoized) function at render time, but does not actually call the function yet; typically you just pass this function to an onClick parameter or something like that.
You can use them interchangeably if called correctly, for example having useMemo return a function is equivalent to useCallback, or using useCallback and then calling the returned function is similar to useMemo

Answer 2

useMemo() makes the function run only when inputs change. Else it returns the memoized(cached) result. It is only suggested to use useMemo() for functions involving complex calculations(more time complexity) as there is cost in running useMemo()
useCallback() prevents the new instance of the function(I mean function is redefined) being created on each rerender and thus prevents the rerendering of child components if we pass the function as props to them

Answer 3

Nowadays (25.05.2020), useCallback and useMemo can be used Interchangiably:
const fn = () => { function code }
const fn1 = React.useCallback(fn, deps)
const fn2 = React.useMemo(() => fn, deps)
In both cases, fn1 and fn2 is saved between different renders.
The difference is that useCallback might be a improved in the future where it always returns the same function and relays it to the last function that is passed to it.
I wrote about it here.

Answer 4

In your example, your function expensiveCalc in the useCallback will be run on every render because you are calling the memoized function directly below the useCallback on every render.
useCallback will memoize and return the actual function, so even though the function is memoized it will still be run whenever you call it.
In the example, this is essentially what is happening:
const calcCallback = () => expensiveCalc('useCallback');
const computedCallback = calcCallback();
In your case you should not use useCallback.
If possible move the expensive function outside of your react component and execute it outside as well.
e.g:
const calcResult = expensiveCalc('useCallback');
function App() {
If, for some reason, that is not possible this is where useMemo fits in.
useMemo will memoize the value that is returned from your function and will persist it between renders until your dependencies change.
This means if you do not want to run an expensive function on each render and only want the value, then either move it out of the scope of the react component or use useMemo.
For more details and info about the two hooks you can read more on this article: What is the difference between useMemo and useCallback?