What's the difference between `useRef` and `createRef`?

Question

I was going through the hooks documentation when I stumbled upon useRef.

Looking at their example…

function TextInputWithFocusButton() {
  const inpu         


        

Answer 1

tldr

A ref is a plain JS object { current: }.

React.createRef() is a factory returning a ref { current: null } - no magic involved.

useRef(initValue) also returns a ref { current: initValue } akin to React.createRef(). Besides, it memoizes this ref to be persistent across multiple renders in a function component.

It is sufficient to use React.createRef in class components, as the ref object is assigned to an instance variable, hence accessible throughout the component and its lifecyle:

this.myRef = React.createRef(); // stores ref in "mutable" this context (class)

useRef(null) basically is equivalent to useState(React.createRef())[0] ¹.

---

¹ Replace useRef with useState + createRef

Following tweet has been enlightening for me:

useRef() is basically useState({current: initialValue })[0].

With insights from the tldr section, we now can further conclude:

useRef(null) is basically useState(React.createRef())[0].

Above code "abuses" useState to persist the returned ref from React.createRef(). [0] just selects the value part of useState - [1] would be the setter.

useState causes a re-render in contrast to useRef. More formally, React compares the old and new object reference for useState, when a new value is set via its setter method. If we mutate the state of useState directly (opposed to setter invocation), its behavior more or less becomes equivalent to useRef, as no re-render is triggered anymore:

// Example of mutaing object contained in useState directly
const [ref] = useState({ current: null })
ref.current = 42; // doesn't cause re-render

_{Note: Don't do this! Use the optimized useRef API instead of reinventing the wheel. Above is for illustration purposes.}