title: useMemo vs. useEffect + useState
body: <p>Are there any benefits in using <code>useMemo</code> (e.g. for an intensive function call) instead of using a combination of <code>useEffect</code> and <code>useState</code>?</p>
  <p>Here are two custom hooks that work exactly the same on first sight, besides <code>useMemo</code>'s return value being <code>null</code> on the first render:</p>
  <p><a href="https://codesandbox.io/s/nkxolxwzkj" rel="noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="See on CodeSandbox" /></a></p>
  <h3>useEffect &amp; useState</h3>
  <pre class="lang-tsx prettyprint-override"><code>import { expensiveCalculation } from &quot;foo&quot;;
  
  function useCalculate(someNumber: number): number {
    const [result, setResult] = useState&lt;number&gt;(null);
  
    useEffect(() =&gt; {
      setResult(expensiveCalculation(someNumber));
    }, [someNumber]);
  
    return result;
  }
  </code></pre>
  <h3>useMemo</h3>
  <pre class="lang-tsx prettyprint-override"><code>import { expensiveCalculation } from &quot;foo&quot;;
  
  function useCalculateWithMemo(someNumber: number): number {
      return useMemo(() =&gt; {
          return expensiveCalculation(someNumber);
      }, [someNumber]);
  };
  </code></pre>
  <p>Both calculate the result each time their parameter <code>someNumber</code> changes, where is the memoization of <code>useMemo</code> kicking in?</p>