React useRef Hook

The useRef hook is used to reference a specific value throughout the lifetime of the component. Similar to useState, the useRef hook allows a value to be updated and persist through renders. However, the useRef hook differs from useState because when the value is changed, it does not cause the component to re-render. When useRef is used, it returns an object with one key or property; .current. The property’s initial value is passed into the useRef function as a parameter. The only difference between the useRef returned object and creating an object manually, is the the object will persist through multiple renders.

The useRef hook can be accessed by importing it as a normal React hook and setting a variable to the useRef function. For example:

In the above code, three hooks are imported: useRef, useState, and useEffect. Each of these hooks are responsible for a specific portion of the code. Because useRef does not re-render the component when the value of the reference is changed, the useEffect hook updates the component after every time the text value has changed. The result of this is:

The count is increased every time the value of the input is updated. If the input were deleted the count would go up the amount of times that the input changed. This example is not necessarily useful because the same thing can be done by creating another state variable. One common and powerful tool from the useRef hook is accessing DOM elements.

Similar to document.queryselector(‘DOMelement’) , the useRef hook can access specific DOM elements to modify them directly through JSX. Access the elements by creating a variable and using the useRef function:

Next, use the ref attribute in the DOM element that needs to be tracked and assign it to the new variable.

The console then displays the DOM element that can be modified as needed.

Accessing HTML elements through useRef is extremely helpful, however, it does come at a risk. Becasue it is so easy to manage variables and values, it is easy to add other functionality to inputs or other DOM elements. This is dangerous because useRef does not update state. So if an input value is changed useing the useRef hook without updating the state, the application will not run properly. All state and effects should be managed through state functions such as useState and useEffect. For example, say you are accessing the the input in the code example from above and you want to have a button that selects the input when the button is clicked. The code may look something like this:

This is an acceptable use case for selecting a DOM element. However if you added the following to the function below:

This would not be a good use of the hook because the state is not updated even though a new value was entered into the input.

The last thing that useRef can be used for is accessing the previous value of a state variable. Currently, there is no way to access a previous value of a state variable using only state. To access the last known value that was used, three hooks need to be imported: useRef, useState, and useEffect.

The code would look something like below:

useState is used to change the input values, the useEffect hook is used to update the useRef hook every time the text variable changes.

useRef is a useful tool that can be used in conjunction with useState and useEffect but it cannot totally replace either hook. The main difference between using state and refs is that updating a ref will not cause the component to rerender. Similar to state, is that refs will persist through renders unlike an object that is manually created. The most common use of the useRef hook is manipulating the DOM but it comes with some dangers that should be taken into consideration.

Related posts:

They say too much of a good thing is bad. That sounds like two extremes to me. But isn’t that what it’s all about, staying away from the extremes — starving yourself; binge eating?

The SAFF Championship 2023 final between India and Kuwait was a thrilling encounter that kept fans on the edge of their seats. The match concluded with India securing a hard-fought victory on…

Back when I started writing online, it was because of a genuine desire to record down my thoughts so that the future me could look back on them and remember what life was like for me now. I’d imagine…