useRef Hook

useRef is a React Hook that creates a mutable reference object.

import { useRef } from "react";

function App() {

    const myRef = useRef();

    return (
        <h1>
            Hello React
        </h1>
    );

}

The reference can be accessed using the current property.

The Hook is imported from React.

import { useRef } from "react";

It can also be imported together with other Hooks.

import {
    useState,
    useRef
} from "react";

The basic syntax is:

const reference = useRef(initialValue);

For example:

const countRef = useRef(0);

The value is available through countRef.current.

The object returned by useRef has a current property.

const nameRef = useRef("Rahul");

console.log(nameRef.current);

The current value can be read or changed through .current.

One of the most common uses of useRef is accessing a DOM element.

const inputRef = useRef();

<input ref={inputRef} />

React assigns the corresponding DOM element to inputRef.current.

A ref can be used to focus an input programmatically.

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;

React normally handles the UI declaratively. However, some operations such as focusing an input require access to the actual DOM element.

A ref provides a way to access that DOM node when necessary.

inputRef.current.focus();

A ref can be used to select text inside an input.

function selectText() {

    inputRef.current.select();

}

The select() method is available on suitable input elements.

Changing the current property of a ref does not cause the component to render again.

const countRef = useRef(0);

function increase() {

    countRef.current =
        countRef.current + 1;

}

The ref value changes, but React does not re-render simply because the ref changed.

A ref can be used to keep a value between renders.

const previousValue = useRef();

previousValue.current = value;

This technique can be useful when a component needs to remember a value without using that value itself to trigger another render.

Refs are often used together with useEffect.

import {
    useRef,
    useEffect
} from "react";

function App() {

    const inputRef = useRef();

    useEffect(() => {

        inputRef.current.focus();

    }, []);

    return (
        <input ref={inputRef} />
    );

}

The effect focuses the input after the component has been rendered.

A common example is automatically focusing an input when a component loads.

const inputRef = useRef();

useEffect(() => {

    inputRef.current.focus();

}, []);

A ref can be attached to different DOM elements, including buttons.

const buttonRef = useRef();

<button ref={buttonRef}>
    Click Me
</button>

The DOM element can then be accessed with:

buttonRef.current

A DOM reference can be used for certain imperative DOM operations.

const inputRef = useRef();

function disableInput() {

    inputRef.current.disabled = true;

}

<input ref={inputRef} />

<button onClick={disableInput}>
    Disable
</button>

In normal React applications, prefer state-driven UI when the change can be expressed declaratively.

Refs can store values such as timer IDs that need to persist between renders without causing re-renders.

const timerRef = useRef(null);

timerRef.current = setInterval(() => {

    console.log("Running");

}, 1000);

const timerRef = useRef(null);

function startTimer() {

    timerRef.current = setInterval(() => {

        console.log("Running");

    }, 1000);

}

function stopTimer() {

    clearInterval(timerRef.current);

}

The ref keeps the timer ID available between renders.

A timeout ID can also be stored in a ref.

const timeoutRef = useRef(null);

function startTimeout() {

    timeoutRef.current = setTimeout(() => {

        console.log("Completed");

    }, 2000);

}

function cancelTimeout() {

    clearTimeout(timeoutRef.current);

}

A ref can remember the previous value of state between renders.

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

const previousCount = useRef();

useEffect(() => {

    previousCount.current = count;

}, [count]);

The ref can preserve the value between renders.

A ref can be used to focus an input when validation fails.

const inputRef = useRef();

function validate() {

    if (name.trim() === "") {

        inputRef.current.focus();

    }

}

<input
    ref={inputRef}
    value={name}
    onChange={(e) =>
        setName(e.target.value)
    }
/>

A DOM reference can be used to read information about an element.

const boxRef = useRef();

function showSize() {

    const width =
        boxRef.current.offsetWidth;

    console.log(width);

}

<div ref={boxRef}>
    Content
</div>

This can be useful when an application needs information about the rendered DOM element.

A ref can provide access to media elements such as <video>.

const videoRef = useRef();

function playVideo() {

    videoRef.current.play();

}

<video ref={videoRef} controls>
    Your browser does not support video.
</video>

<button onClick={playVideo}>
    Play
</button>

Refs can also provide access to elements such as <canvas>.

const canvasRef = useRef();

useEffect(() => {

    const canvas =
        canvasRef.current;

    const context =
        canvas.getContext("2d");

}, []);

return (
    <canvas ref={canvasRef} />
);

Some third-party JavaScript libraries need direct access to DOM elements. A ref can provide the required DOM element.

const containerRef = useRef();

useEffect(() => {

    const element =
        containerRef.current;

    // Initialize library here

}, []);

return (
    <div ref={containerRef}>
    </div>
);

The ref object remains available across renders of the same component instance.

const renderCount = useRef(0);

renderCount.current++;

console.log(
    renderCount.current
);

The ref value can persist without being state that triggers rendering.

If changing a value should update the visible interface, state is usually the appropriate choice.

Prefer:

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

setCount(count + 1);

Instead of using a ref for a value that needs to be rendered.

const countRef = useRef(0);

countRef.current++;

import {
    useRef,
    useEffect
} from "react";

function App() {

    const inputRef = useRef();

    useEffect(() => {

        inputRef.current.focus();

    }, []);

    function focusInput() {

        inputRef.current.focus();

    }

    return (
        <div>

            <h1>
                useRef Example
            </h1>

            <input
                ref={inputRef}
                placeholder="Enter your name"
            />

            <button onClick={focusInput}>
                Focus Input
            </button>

        </div>
    );

}

export default App;

• Forgetting to import useRef.
• Forgetting to attach the ref using the ref attribute.
• Accessing current before the DOM element exists.
• Using refs when state should control the UI.
• Expecting a ref update to cause a re-render.
• Creating unnecessary direct DOM manipulation.
• Forgetting cleanup when refs are used with timers or subscriptions.

• Use useRef when you need a persistent mutable value.
• Use refs for DOM access when declarative React state is not enough.
• Use ref={myRef} to connect a ref to a DOM element.
• Access the current value using myRef.current.
• Remember that changing current does not trigger a re-render.
• Use state when a value needs to update the visible interface.
• Use cleanup for timers or subscriptions stored through refs.
• Use refs carefully and avoid unnecessary direct DOM manipulation.
• Refs are useful with browser APIs and some third-party libraries.
• Keep the component declarative whenever possible.