React Hooks Tutorial - 28 - useRef Hook Part 1

the next hope we are going to learn about is the use ref hug this hook makes it possible to access Dom nodes directly within functional components for our understanding we will take a look at one of the more common use cases which is focusing a text input for example consider a login form as soon as the page loads let's say by default we want the user name input field to be focused let's see how to achieve that with the use ref hug I'm going to start off by creating a new file called focus input dot J s within the file I'm going to use the step @r f c/e to create a functional component within the JSX I will add an input element input type is equal to text finally I will include this component in AB Dodgers if you never save both the files and take a look at the browser you can see that we have an input element what we want though is for this element to be focused on page load let's see how to do that first we need to implement the component did mount behavior as we want to focus on the input element only once and that is after the component has mounted lucky for us we already know how to do this using the effect hub so import use effect from react and within the component call use effect use effect takes in an arrow function as its first argument and a dependency array as its second argument believe the array empty as we want this function to execute only once and what is it that we want to do within the function we want to focus the input element and the way to do that is using the ref hook now there are three simple steps first step is to import user F from react second step create a ref variable by calling user F and passing in the initial value so Const input graph is equal to use wrath and initially the ref will hold null value once we create the ref we need to attach it to the input element and to attach a ref we make use of the reserved ref attribute so on the input element ref is equal to input graph that is the name of our reference variable the final step is to call the focus method on the input element within the arrow function we specified input graph dot current dot focus now where did this current property come from well that is just something reactors react will set the refs current property to the corresponding Dom node hence this is how you actually access the input element input ref dot current all right let's save this and take a look at the browser you can see that now as soon as the page loads the component mounts and the input element is focused so this is how you can use the ref hope to imperatively access Dom nodes in react functional components however this is not the only use that use ref hook brings to the table let's take a look at another one of its uses in the next video and see you guys in the next one

Channel: Codevolution

Views: 73,041

Rating: 4.9420786 out of 5

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, React Hooks, React Hooks Tutorial, ReactJS Hooks, React Tutorial for Beginners, ReactJS Tutorial for Beginners, useRef, useRef Hook, useRef Hook in React

Id: yCS2m01bQ6w

Length: 4min 17sec (257 seconds)

Published: Mon Jul 29 2019