title: What does useCallback/useMemo do in React?
body: <p>As said in <a href="https://reactjs.org/docs/hooks-reference.html#usecallback" rel="noreferrer">docs</a>, <code>useCallback</code>
  Returns a memoized callback.</p>
  <p>Pass an inline callback and an array of inputs. <code>useCallback</code> will return a memoized version of the callback that only changes if one of the inputs has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).</p>
  <pre><code>const memoizedCallback = useCallback(
    () =&gt; {
      doSomething(a, b);
    },
    [a, b],
  );
  </code></pre>
  <p>But how does it work and where is the best to use it in React?</p>
  <p>P.S. I think visualisation with <a href="https://codesandbox.io/s/q87kznyp69" rel="noreferrer">codepen example</a> will help everyone to understand it better. <a href="https://usehooks.com/useMemo/" rel="noreferrer">Explained in docs</a>.</p>