Mahalakshmi C

Posted on Oct 1

useRef Hook in React

#react #webdev

useRef is a React Hook that is used to store a value that persists between renders without causing the component to re-render when the value changes.

It is also commonly used to access and interact with DOM elements directly.

Syntax

const reference = useRef(initialValue);

For example:

const count = useRef(0);

What Does useRef Return?

useRef() returns an object containing a property called current.

const count = useRef(0);

console.log(count);

The result is similar to:

{
    current: 0
}

The value can be accessed or changed using:

count.current

For example:

count.current = count.current + 1;

Why Do We Use useRef?

useRef is commonly used for:

Accessing DOM elements
Storing values between renders
Keeping a previous value
Storing values without causing a re-render

Example 1: Accessing a DOM Element

One of the most common uses of useRef is focusing an input element.

import { useRef } from "react";

function App() {

    const inputRef = useRef();

    function focusInput() {
        inputRef.current.focus();
    }

    return (
        <div>
            <input ref={inputRef} />

            <button onClick={focusInput}>
                Focus Input
            </button>
        </div>
    );
}

export default App;

How does it work?

First, we create a ref:

const inputRef = useRef();

Then we attach it to the input:

<input ref={inputRef} />

React stores the input DOM element inside:

inputRef.current

When the button is clicked:

inputRef.current.focus();

the input receives focus.

Example 2: useRef Does Not Cause Re-render

Consider:

const count = useRef(0);

We can change the value:

count.current = count.current + 1;

But changing count.current does not cause the component to re-render.

This is an important difference between useRef and useState.

useState	useRef
Stores state	Stores a mutable reference
Updating state causes re-render	Updating `.current` does not cause re-render
Uses a setter function	Uses `.current`
Used when UI needs to update	Useful when UI does not need to update

useRef for Storing Previous Values

useRef can also be used to remember a value from the previous render.

import { useEffect, useRef, useState } from "react";

function App() {

    const [name, setName] = useState("Maha");
    const previousName = useRef("");

    useEffect(() => {
        previousName.current = name;
    }, [name]);

    return (
        <div>
            <h2>Current Name: {name}</h2>
            <h2>Previous Name: {previousName.current}</h2>

            <button onClick={() => setName("Lakshmi")}>
                Change Name
            </button>
        </div>
    );
}

export default App;

Here, previousName.current can store a value that persists between renders.

useRef vs useState

Suppose we have:

const [count, setCount] = useState(0);

When we write:

setCount(count + 1);

React updates the state and re-renders the component.

But with:

const count = useRef(0);

when we write:

count.current = count.current + 1;

the value changes, but React does not re-render the component just because the ref changed.

Simple Flow

useState

State changes
     ↓
React re-renders
     ↓
UI updates

useRef

ref.current changes
     ↓
No automatic re-render
     ↓
Component UI does not automatically update

Conclusion

useRef is useful when a value needs to persist between renders without triggering a re-render. It is especially useful for accessing DOM elements, storing previous values, and keeping mutable values that do not directly control the UI.

DEV Community