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.

import { useRef } from 'react';

// Scenario A: Store mutable data (does not trigger re-render)
const Component1 = () => {
    const countRef = useRef(0);
    return (
        <button onClick={() => { countRef.current += 1 }}>Increment</button>
    )
};

// Scenario B: Store reference to an element
const Component2 = () => {
    const inputRef = useRef(null);
    useEffect(() => { inputRef.current?.focus(); }, []);
    return (
        <input ref={inputRef} />
    )
};