Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/reactjs/react-js-useref-hook/ below:

ReactJS useRef Hook - GeeksforGeeks

Last Updated : 18 Aug, 2025

The useRef Hook is a built-in React Hook that returns a mutable reference object (ref) that persists across renders. Unlike state variables, updating a ref does not trigger a component re-render.

Syntax

const refContainer = useRef(initialValue);

In the above syntax:

• useRef returns an object { current: initialValue }.
• The current property can be updated without re-rendering the component.

In this example, we have a button called ACTION, whenever we click on the button the onClickHandler gets triggered and it focuses the textarea with the help of useRef hook.

import React, { Fragment, useRef } from 'react';

function App() {
    const focusPoint = useRef(null);
    const onClickHandler = () => {
        focusPoint.current.value =
            "The quick brown fox jumps over the lazy dog";
        focusPoint.current.focus();
    };
    return (
        <Fragment>
            <div>
                <button onClick={onClickHandler}>
                    ACTION
                </button>
            </div>
            <label>
                Click on the action button to
                focus and populate the text.
            </label><br />
            <textarea ref={focusPoint} />
        </Fragment>
    );
};
export default App;

Output

In this example

• useRef creates a reference focusPoint, which allows direct manipulation of the DOM element.
• Clicking the "ACTION" button triggers onClickHandler, which sets text in the textarea and focuses it.
• <Fragment> (<>...</>) is used to group multiple elements without adding extra wrappers in the DOM.

In addition to accessing DOM elements, useRef is useful for storing values that persist across renders. A common use case is storing a previous value, such as the previous state or props.

import React, { useState, useRef, useEffect } from "react";
function PreviousValue() {
    const [count, setCount] = useState(0);
    const prevCountRef = useRef();

    useEffect(() => {
        prevCountRef.current = count;
    }, [count]);

    return (
        <div>
            <p>Current count: {count}</p>
            <p>Previous count: {prevCountRef.current}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}
export default PreviousValue;

Output

In this example

• count is a state variable that tracks the current count.
• prevCountRef is a reference created with useRef to store the previous count value.
• Whenever count changes, the useEffect hook updates prevCountRef.current to store the previous count.
• Clicking the button increases the count by 1 and updates both the current and previous counts.

1. Direct DOM Manipulation: You can directly access and manipulate DOM elements without triggering a re-render.
2. Persisting Values Across Renders: Use useRef to store values (such as previous state values) that should persist across renders without triggering unnecessary updates.
3. Optimizing Performance: Avoiding re-renders useRef can help optimize performance, especially when managing timers, DOM references, or other non-UI values.

Using useRef correctly can enhance performance, but excessive use may introduce unnecessary complexity.

• Use it for non-rendered values: Ideal for persisting values like timers, previous states, or DOM elements.
• Avoid using it as state replacement: If UI updates are needed, use useState instead.
• Measure before optimizing: Use React DevTools to analyze performance.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4