useRef

Returns a mutable ref object whose .current property is initialized to the passed argument. It persists across renders and updating it does not trigger a re-render.

Mutable Data

Stores mutable data across renders without triggering a re-render when its value changes.

import { useRef } from 'react';

export const MyComponent = () => {
    const countRef = useRef(0);
    return (
        <button onClick={() => { countRef.current += 1 }}>Increment</button> // Does not trigger re-render
    )
};

Element Reference

Stores a reference directly to a DOM element to interact with it imperatively.

import { useRef } from 'react';

export const MyComponent = () => {
    const inputRef = useRef(null);
    useEffect(() => { inputRef.current?.focus(); }, []); // Access element imperatively
    return (
        <input ref={inputRef} />
    )
};