Use the React useRef Hook to Reference a DOM Element or Simulate an Instance Variable
Refs have been a handy way to reference DOM elements in Class Components, but did you know you can use refs for other things as well? In this lesson, we’ll examine how to leverage the useRef hook inside a Function Component. We’ll first use this ref to attach to a React element, which you may already be familiar with, but then we’ll examine how to use a ref to simulate a Class instance variable.
Instructor: [00:00] We'll start a dev server to run a simple react app that you can see on the right. The app is a react class component and uses a react.create ref so that the focus button can access the input dom element, set focus, and select the text.
[00:16] Let's take a look at the code for this and show how you could do the same thing with the react function component and hooks.
[00:23] The playground component has the code for the app we just saw. You can see the create ref in our constructor. We assign that to the ref prop of our input component. On the on click of the button, it calls the focus and slight methods off the dom element.
[00:40] In order to convert this class to a function component, we'll need to import use ref from react and then replace class with function. Next, we could remove the constructor and we'll introduce a local input ref variable and set it to the return of the use ref hook. Then, we'll convert the handle click method to a local function and remove the this.references in our file with nothing.
[01:07] Finally, we'll remove the render method and just return what we want to be rendered. It should work just as it did before, and it does. Nice.
[01:18] Refs can actually be used in another way. They weren't only made for dom elements. You can actually use refs to simulate instance variables like you would use in a class. Let's switch up our app to use a todo list, instead. Let's explore this alternate technique.
[01:36] The class version of our todo list app keeps track of the index values of each todo and increments them. If you refresh and create a new one, it's smart enough to take the highest value from before and increment that one.
[01:52] It starts at zero and when it reads from local storage, it updates to the maximum number that it finds. Then, on additions, it just increments from there.
[02:02] If we switch to the function component version of this todo list, we'll find that it takes the easy way out and just uses date.now, which is the number of milliseconds since January 1st of 1970. If we run the app and add an item, you'll see our index is huge. Let's go and use a ref hook inside our function component to simulate what the class component was doing.
[02:27] First, we'll import the use ref hook from react. Then, we'll create a todo ID variable and assign it to the return of use ref. We'll initialize the ref to a value of zero.
[02:41] Let's go grab the logic from the class version to use in our new function component.
[02:47] Inside our initial todo's function, we'll expand our one liner function, save off our parsed storage and a value from storage variable, and make sure we return that from our function. However, right before, we'll paste the code from our class component, delete the this.part, make sure we access the current property off the ref, and replace todos with value from storage.
[03:11] That'll reduce over all the entries, looking for the maximum ID value.
[03:17] The last step is to increment our todo ID when creating a new one and to use that value instead of date.now. Now, we should be able to test our app again, but this time our ID should be the next in line. It is. It's five.