Stability Across Renders: Without useRef: A plain object ({ current: undefined }) is recreated on each render, so it doesn’t persist. With useRef: useRef returns a stable object that stays the same across renders.

Automatic DOM Binding: Without useRef: React doesn’t automatically set .current to the DOM element, so REF.current won’t reliably point to the button. With useRef: React sets REF.current to the DOM element, making it reliable for DOM access.

Re-rendering: Without useRef: The object isn’t stable, which can cause unnecessary re-renders. With useRef: useRef doesn’t trigger re-renders when .current changes, making it ideal for mutable data that shouldn’t affect rendering. In short: useRef is the correct way to create stable, persistent, and React-compatible references for DOM elements.

Summary Using useRef is essential for creating stable references in React, as it:

Creates an object that persists across renders, unlike manually creating { current: undefined }.

Integrates with React's ref system, making REF.current a reliable way to reference DOM elements.

Allows mutable values to persist without causing re-renders, which is ideal for non-stateful data that needs to persist, like the button element in this example.

In almost all cases where you need a reference in React, using useRef is the correct and reliable approach.