title: What's the difference between `useCallback` with an empty array as inputs and `useCallback` without a second parameter?
body: <p>On my journey to try and understand React Hooks better I came across some behaviour I did not expect. I was attempting to create an array of refs and pushing to said array via an onRef function I would pass to my <code>&lt;div&gt;'s</code>. The array kept getting bigger everytime the component re-rendered presumably just because it was a simple arrow function and not memoized.</p>
  
  <p>So then I added the <code>useCallback</code> hook to make sure that I wouldn't get the same ref multiple times, but to my surprise it still called the function every re-render. After adding an empty array as second parameter the refs only fired once per component as expected.</p>
  
  <p>This behaviour is demonstrated in the snippet below.</p>
  
  <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>const Example = () =&gt; {
    const _refs = React.useRef([]);
    
    // Var to force a re-render.
    const [ forceCount, forceUpdate ] = React.useState(0);
    
    const onRef = (ref) =&gt; {
      if (ref &amp;&amp; ref !== null) {
        console.log("Adding Ref -&gt; Just an arrow function");
        _refs.current.push(ref);
      }
    }
    
    const onRefCallbackWithoutInputs = React.useCallback((ref) =&gt; {
      if (ref &amp;&amp; ref !== null) {
        console.log("Adding Ref -&gt; Callback without inputs.");
        _refs.current.push(ref);
      }
    });
    
    const onRefCallbackEmptyArray = React.useCallback((ref) =&gt; {
      if (ref &amp;&amp; ref !== null) {
        console.log("Adding Ref -&gt; Callback with empty array");
        _refs.current.push(ref);
      }
    }, []);
    
    React.useEffect(() =&gt; {
      console.log("Refs size: ", _refs.current.length);
    });
    
    return (
      &lt;div&gt;
        &lt;div ref={onRef}/&gt;
        &lt;div ref={onRefCallbackWithoutInputs}/&gt;
        &lt;div ref={onRefCallbackEmptyArray}/&gt;
        &lt;div onClick={() =&gt; forceUpdate(forceCount + 1)} 
          style = {
            {
              width: '100px',
              height: '100px',
              marginTop: '12px',
              backgroundColor: 'orange'
            }
          }&gt;
          {'Click me to update'}
         &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  ReactDOM.render(&lt;Example/&gt;, document.getElementById('root'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&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;
  
  &lt;div id='root' style='width: 100%; height: 100%'&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I assumed <code>useCallback</code> would have an empty array as a default for the second parameter. So what exactly does not giving a second parameter do? Why does it behave differently?</p>