Focusing on inputs in react

Focusing the user onto an input is usually pretty simple

// standard DOM
document.querySelector("input").focus()

However in React you need a reference to this element as it may change over time. This is done with the ref prop.

// inside a React functional component
const input = useRef()
...
return (
 <input ref={input} />
)
...

Now we’ve got a variable which will always point to this element, even between renders. The input tag can be assessed via

input.current.focus()

The current object on the ref will always be updated, so you can be sure you are hitting the current element.