In this Blog we will learn about useRef Hook.

useRef(initialValue) is a built-in React hook that accepts one argument as the initial value and returns a reference or ref. A reference is an object having a property current.

Before getting into what is useRef, we will try to solve a problem that how we can count the number of times component rendered on the screen when there is change in input value?

In above example we are setting the state using useState once the input field is changed. and 'setRenderCount' will update the 'renderCount' when we update our component inside useEffect.

But in the above example the problem is, once the state is set, it will again re-render and re-render and will go in infinite loop. so that's why we are seeing the number 27698 in above screenshot that means it has re-rendered 27698 times.

From this we understood that we will not able to solve this problem using useState.

So by using useRef we can solve this problem.

const renderCount = useRef(0) where useRef returns and object with the property 'current'. so renderCount is equal to { current: 0 } where 0 is the initial value which we have passed in useRef.

useEffect(()=>{ 
renderCount.current = renderCount.current + 1
},[name])

We can change renderCount.current as many times as we want, as much as we want but it will never ever cause component to re-render. Because it is completely separate from our component render cycle.

So that's why we can see number 5 in output as component is rendered 5 times when we type 'hello'.

This is basic use case for Ref in react.

But most used use case is to Reference, Elements inside of your html. This is actually so popular that each element inside your document has a ref attribute.

here we have initialized the variable 'inputRef' with useRef and used ref attribute of input element as 'inputRef'. that means we have referenced the input field in DOM with inputRef variable using useRef.

We can now focus on input variable using focus button click & then the focus function will run which will set focus on input field using inputRef.current.focus()

How to store the previous value of state in functional component using useRef?

Another great useCase for refs is to store the previous values of your state because there is no way to get the previous values of state inside functional component without re-render.

Here, We are storing the previous input name inside the 'prevNameRef' variable without additional re-rendering.

If we wanted to save the previous name inside the state variable using useState then it would cause re-render again.

Refs are not causing an additional re-render which we don’t need.

So, the 2 main differences using useRef and useState:

Updating a reference doesn't trigger re-rendering, while updating the state makes the component re-render; The reference update is synchronous (the updated reference value is available right away), while the state update is asynchronous (the state variable is updated after re-rendering).

I hope you liked reading this blog and understood basics of useRef Hook in React!

If you have any suggestions, feel free to write in comments below.

Thanks for Reading.