React useRef Hook
Tags: react, usere, javascript, webdev
Published: 2022-05-11 15:17:57

**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 ,**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqu0e5xgelasn8qt3bf0.png)
 
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](https://codesandbox.io/s/friendly-fast-0rwzhr?file=/src/App.js)
![useState Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3eh5srwygmuns18ksgvf.png)
 
**Using useRef**
[Sandbox](https://codesandbox.io/s/dazzling-spence-352sb6?file=/src/App.js)
![useRef Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yh8a8g2ez59ehqsl5zbu.png)
 
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.

![Focus Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54qyvxytvd6i4sriaczn.png)
 
<u>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.</u> For example, if you wanted to focus an input element whenever a button was clicked you could use a ref to do that.

[Sandbox](https://codesandbox.io/s/new-framework-zdxh1g?file=/src/App.js)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bkc4tv5csoks6yt6tws.png)
 
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.

<u>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.</u>

> **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 !

> **Resources**

1. https://reactjs.org/docs/hooks-reference.html#useref
2. https://levelup.gitconnected.com/understanding-useref-513b1bbe00dc
3. https://dev.to/salehmubashar/useref-or-usestate-which-is-better-258j

> **Connect with me**

- [https://twitter.com/rutvikumak13](https://twitter.com/rutvikumak13)

- [https://github.com/rutvikpumak](https://github.com/rutvikpumak)