How to Automatically Focus on Input Fields With React refs

[00:00 - 00:05] Automatically focus on an input. To focus on the input we'll use a React feature called refs.

[00:06 - 00:13] Refs provide a way to reference the actual DOM nodes of the rendered React elements. There are several ways you can define refs in React.

[00:14 - 00:22] We're going to use the hook version. Inside of your project, create a new file, SRC, Utils, Use, Focus, .ts.

[00:23 - 00:36] Inside of this file, import, Use, ref and use effect from React. The idea of this hook is that we'll store the reference to the actual HTML input element in the reference.

[00:37 - 00:44] And then when component gets mounted, so the input is already rendered, we will call the method focus on this input element. Define the hook.

[00:45 - 00:56] Expert, const, use, focus equals a function where we get the ref, use ref. We can provide a type of this ref because use ref is a generic hook.

[00:57 - 01:03] The type of this particular element is HTML input element. And by default, the value is null.

[01:04 - 01:18] Then define the use effect, use effect, pass an empty array as a dependency array, and then call ref current focus. Here we use optional chaining because theoretically, current can be undefined.

[01:19 - 01:28] Though in our case, I wouldn't be checking for that because I would assume that if the component is already mounted, then the element is definitely there. And now return the ref.

[01:29 - 01:41] So we use the use ref to get access to the rendered input element. TypeScript can't automatically know what the element type will be, so we need to provide the actual type that we did here in HTML input element.

[01:42 - 01:51] Then in the use effect, when the component using this hook will get mounted, we'll trigger the focus method on that element. If you pick the type of the ref, you will see that it is react ref object.

[01:52 - 02:00] The ref object type is actually an interface with the type argument t. In our case, we specified it to be HTML input element.

[02:01 - 02:10] This type is used to describe the field current that can have type t or null. Note that it's marked as read-only, so you can't reassign the current field manually.

[02:11 - 02:21] If you try to do it, you will get an error, cannot assign to current because it is a read-only property. It happened because we provide a default value null to our user ref.

[02:22 - 02:29] You can have a mutable ref as well. Just don't pass null as a default value or specify null as a possible ref type.

[02:30 - 02:36] In both cases, you will get mutable ref where you can reassign the current value. Let's test it.

[02:37 - 02:46] So right now we have ref object that has immutable current. If you pass or null and check the ref type again, we will have mutable ref object.

[02:47 - 03:03] This is done so that refs are more predictable. If you want to use the ref so that react handles it automatically, for example, we are going to pass ref to an element and we are not going to change the value of the current field manually, then we probably want an immutable ref.

[03:04 - 03:18] Otherwise, if you will use ref as a way to store values related to the component that you don't want to observe, that shouldn't trigger re-renders, then you can use immutable ref. Now, let's use our use focus hook.

[03:19 - 03:31] Go back to the new item form, get the input ref using use focus and pass it as a ref to the new item input. Alright, let's try to launch the app.

[03:32 - 03:33] Yarn. Start.

[03:34 - 03:39] If you click create another card or as another list, you will see that the input is focused automatically.