React useRef Hook

#react #usere #javascript #webdev

Refs are probably the most misunderstood and misused part of React. In this post I am going to cover everything you need to know about refs in order to help you never make those ref mistakes.

So Let's get started ,

As we already know that hooks in react is nothing but a function so , The useRef Hook is also a function which return an mutable object whose .current property is initialized with passed argument (initialValue).The returned object will persist for lifetime of the component.

How to use in you react app ?

Step 1 :
import {useRef} from "react";

Step 2 :
In your functional component write
const myRef = useRef(0)

Internally the myRef is now equal to an object that looks like {current : 0}

Let's learn better from example

We will take an example of an counter , and compare it using useState and useRef hooks.

Using useState
Sandbox

Using useRef
Sandbox

Both of these components are doing the same work of incrementing the value of counter by 1, but in the state example the component will re-render itself since useState causes the component to re-render. The ref example on the other hand will not update the value on the page because setting a ref wont cause re-render of component.

Now We have got a basic idea of how useRef basically works internally and lets now talk about when you would need to use a Ref.

The most common use case for refs in React is to reference a DOM element. Because of how common this use case is every DOM element has a ref property you can use for setting a ref to that element. For example, if you wanted to focus an input element whenever a button was clicked you could use a ref to do that.

Sandbox

As you can see in the code above we use the ref property on the input element to set the current value of inputRef to the input element. Now when we click the button it will call focusInput which uses the current value of the inputRef variable to set the focus on the input element.

Being able to access any DOM elements directly with ref is useful with setting focus and manage other attributes that you cannot directly achieve in react.

Summary

useRef won't re-render the component like useState do.
If you want to do some operation that won't need re-rendering of component then you can use useRef hook.
Refs are useful when getting user input, DOM element properties and storing constantly updating values.

Thanks for reading !
If you liked this blog, please share it with your friends !