What's the difference between `useRef` and `createRef`? : <p>I was going through the hooks documentation when I stumbled upon <a href="https://reactjs.org/docs/hooks-reference.html#useref" rel="noreferrer"><code>useRef</code></a>.</p>

<p>Looking at their example…</p>

<pre><code>function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () =&gt; {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    &lt;&gt;
      &lt;input ref={inputEl} type="text" /&gt;
      &lt;button onClick={onButtonClick}&gt;Focus the input&lt;/button&gt;
    &lt;/&gt;
  );
}
</code></pre>

<p>…it seems like <code>useRef</code> can be replaced with <code>createRef</code>.</p>

<pre><code>function TextInputWithFocusButton() {
  const inputRef = createRef(); // what's the diff?
  const onButtonClick = () =&gt; {
    // `current` points to the mounted text input element
    inputRef.current.focus();
  };
  return (
    &lt;&gt;
      &lt;input ref={inputRef} type="text" /&gt;
      &lt;button onClick={onButtonClick}&gt;Focus the input&lt;/button&gt;
    &lt;/&gt;
  );
}
</code></pre>

<p>Why do I need a hook for refs? Why does <code>useRef</code> exist?</p>
