Refs in React
A ref is short for reference. A ref is used for referencing a DOM element and interacting with that DOM node directly.
Though this is a step away from React's approach of rendering through props, React's docs specify a few good use cases for Refs:
-
Managing focus, text selection, or media playback.
-
Triggering imperative animations.
-
Integrating with third-party DOM libraries.
Link to the repo: https://github.com/AkashGutha/egghead-singles/tree/master/20-create-refs
Instructor: [00:00] We have a simple application with an input of type text in it. Let's say you want your application to start focusing on your text input as soon as the application starts. In this case right now, it's not doing it.
[00:12] There's a property for that. It's called let's autofocus. Once you set it to true, the application will start focusing this element as soon as you load the application. If you want to control this behavior, the recommended way of doing it in React is to use state.
[00:28] You can create a property called isFocused, and use that property to set it to autofocus, so that you can control the autofocus from the state. Now, the autofocus property is bound to our state. Whenever you change the state, you rerender the component.
[00:43] As you can see, setting it to false will make the application not focus on the text input as soon as you start it. The problem with this approach is that you need to specify a property, even when it's not really required.
[00:57] You can just achieve this using DOM manipulation. This is exactly where refs come in. Ref is short for reference. That is, you are referencing a DOM element. A ref takes in a callback function. Let's pass in a function.
[01:12] This function gets one argument. That is the node that is the exact DOM element, or the DOM node that we need to access. For this case, we'll do node.focus. That will help us focus as soon as you start the application. Now, when you refresh the application, you can see that it is still focusing on the text input.
[01:34] You can also turn this into an idle function. Let's just get rid of the function declaration, and execute a single statement that is node.focus. The resulting behavior of the application is still the same, just as you would expect it to be.
[01:50] Now, let's take this a little bit further, and start manipulating the DOM at the component level. For this first, let's make a button, and just pass in focus input as the text of the button. Now, for the button to work, we'll give it an onClick function.
[02:12] We'll name the onClick function as focus. Let's write this.focus to reference the focus function in the component. For now, we'll make an empty focus function. That will be an arrow function, so that it's bound to the class.
[02:25] Then we'll make some small change to the ref function. Here, we will make sure that there is a global variable called as inNode. Then we'll set the this.inNode to be equal to that node. Now that we have the DOM element reference at the component level, we can use that reference inside the focus function to do the same exact thing as we did earlier. That is, the node.focus.
[02:56] When the button is pressed, it invokes the focus function, which will then get the reference to the input text node, and calls the focus function on it, which will bring the input element into focus.
[03:11] Just to be sure that we are getting the correct reference and try to log it, if you do console.log(this.inNode), and refresh the application, when you press the button, you can see that it has logged this.inNode, and it is exactly the DOM element we are referencing that is input of type text, and a placeholder of text input.