What is useRef hook in React?

Here is my new post about the useRef hook.

What is useRef?

As per React documentation, the useRef hook returns a mutable ref object whose current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

If we break down the definition given in the documentation we get three things:

• It returns a mutable object
• It has a current property (which needs to be initialized)
• The returned object persist for the lifetime of the component

Syntax:

const refVariable = useRef(null)

// refVariable = Object which has the current property. So we have access to refVariable.current

// Initial value of refVariable.current

When to use the useRef hook?

The two main use cases of useRef hok are:

• To access the DOM Nodes
• Keeping a mutable variable

The useRef is similar to useState in terms of keeping a mutable variable. The major difference is that it doesn't trigger a re-render of the component.

Some Example.

One of the most common useRef is to bring focus to the input element as soon as the form loads.

import React, {useRef, useEffect} from 'react'

const App () => {
    const firstNameRef = useRef(null) //intialize the current property to nul

    useEffect(() => {
        firstNameRef.current.focus() //set focus on firstNameRef
    }, [])

    return (
        <>
          {/*Use the "ref" attribute to set the input DOM node equal to "firstNameRef" */}
          <input type={text} ref={firstNameRef} placeholder="First Name Here..." />
          <input type={text} placeholder="Last Name here..." />
          <button>Submit</button>
          </>
    )
}

So useRef is analogous to using document.querySelector or document.getElementById

const divElement = document.querySelector(".sample")

<div className="sample" ref={divRed}>Sample Div</div>

//where divRef is already defined by useRef

Let's take another example. Suppose you want to print how many times a component rendered. If you try to do this by using states you will run into an infinite loop situation (because incrementing the counter state when the component renders will trigger another render and it will continue forever...). So this can be solved by useRef.

import React, {useRef, useEffect, useState} from 'react'

const App = () => {
    //initialize the current property of renderCount 1
    const renderCount = useRed(1)

    useEffect(() => {
        renderCount.current++; 
        //increment renderCount.current everytime the component renders
    })

    return (
        <>
          <input
          type={text}
          onChange={e => setName(e.target.walue)}
          placeholder="First name here..."
          />
          <p>This component rendered {renderCount.current} times </p>
          </>
    )
}

So, if you want to add state to your component that persists across renders and CAN TRIGGER a re-render when is updated, go with useState or useReducer.

If you want to add state to your component that persists across renders but DOESN'T TRIGGER re-render when it is updated, go with useRef.

💻 Thanks For Reading | Happy Coding 🥂