title: What's the difference between useCallback and useMemo in practice?
body: <p>Maybe I misunderstood something, but useCallback Hook runs everytime when re-render happens.</p>
  
  <p>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).</p>
  
  <p>I've changed useCallback to useMemo - and useMemo works as expected — runs when passed inputs changes. And really memoizes the expensive calculations.</p>
  
  <h2>Live example:</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'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(() =&gt; expensiveCalc('useCallback'), [neverChange]);
    const computedCallback = calcCallback();
    
    // This  executes once
    const computedMemo = useMemo(() =&gt; expensiveCalc('useMemo'), [neverChange]);
    
    setTimeout(() =&gt; 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 &lt; tenThousand) i++;
    
    return ++expensiveCalcExecutedTimes[hook];
  }
  
  
  ReactDOM.render(
    React.createElement(App),
    document.querySelector('#app')
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;useCallback vs useMemo:&lt;/h1&gt;
  &lt;div id="app"&gt;Loading...&lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>