title: Difference between passing in null and undefined in useRef
body: <p>What's the difference between <code>useRef(null)</code> and <code>useRef(undefined)</code> (or just <code>useRef()</code>)?</p>
  
  <p>In TypeScript, the results end up with different types: </p>
  
  <pre><code>const undefinedRef: React.MutableRefObject&lt;undefined&gt; = useRef(undefined)
  conse noArgRef: React.MutableRefObject&lt;undefined&gt; = useRef()
  
  const nullRef: React.MutableRefObject&lt;null&gt; = useRef(null)
  </code></pre>
  
  <p>This also has further consequences, when passing the ref to another element: </p>
  
  <pre><code>const nullRef = useRef(null)
  &lt;div ref={nullRef} /&gt; // this works
  
  const undefinedRef = useRef()
  &lt;div ref={undefinedRef} /&gt; // compiler failure!
  /*
  Type 'MutableRefObject&lt;undefined&gt;' is not assignable to type 'string | ((instance: HTMLDivElement | null) =&gt; void) | RefObject&lt;HTMLDivElement&gt; | null | undefined'.
    Type 'MutableRefObject&lt;undefined&gt;' is not assignable to type 'RefObject&lt;HTMLDivElement&gt;'.
      Types of property 'current' are incompatible.
        Type 'undefined' is not assignable to type 'HTMLDivElement | null'.ts(2322)
  */
  </code></pre>
  
  <p>Despite the compiler failure, it still works for my use case (using the <code>useClickAway</code> hook from <code>react-use</code>)</p>
  
  <p>What's the impact at this, looking beyond the TypeScript types?</p>
  
  <p>Here's a CodeSandbox that recreates the failure: <a href="https://codesandbox.io/s/prod-resonance-j9yuu?file=/src/App.tsx" rel="nofollow noreferrer">https://codesandbox.io/s/prod-resonance-j9yuu?file=/src/App.tsx</a></p>