React useRef Hook

Rutvik Umak — Wed, 11 May 2022 15:17:57 +0000

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 !

Resources

Connect with me

Why React is UI Library and not a Framework ?

Rutvik Umak — Mon, 14 Feb 2022 04:12:12 +0000

Understanding difference between Library and Framework

When we call something as a framework it has flexibility of doing multiple things at a time.
Library is kind of focus on just one thing and get it done.
When we use framework , the framework is in charge of the flow.
When we use library , you are in charge of the library because you will be choosing when and where to call that library.

Now let's understand about React

React is User Interface Library because react was actually invented or designed coded to solve the problem of User Interface Development.

If react would have framework :

We would have routing inside built in , but we don't have.
We would have testing framework built in , but we use something like jest or react test library.
For data fetching we have to use axios or fetch api to achieve that.
For Building , we have infrastructure by yourself or web pack.
For state management , we have to redux or any other tool to do that.

Notification system or localization or anything , practically anything you want to do in react based application you have to bring it from outside.

React is only meant for doing this , and that's great advantage because you have the liberty of what you want to use versus you don't want to use.

According to your project need , you actually has the ability to choose that's why react is so powerful in terms of giving you the liberty, giving you the flexibility of doing things in you way.

You must just focus on building things and bringing things whatever you need and yes that's why

DEV Community: Rutvik Umak

React useRef Hook

How to use in you react app ?

Let's learn better from example

Why React is UI Library and not a Framework ?

"React is Library and not a Framework"