React useRef

Overview

useRef is a "box" for a value that survives between renders but doesn't trigger re-renders when changed. Two distinct use cases: DOM access and mutable instance values.

useState  → change = re-render
useRef    → change = NO re-render, React doesn't know

The Rule

If changing the value should update UI → useState. If not → useRef.

Case 1: DOM Access

The most common and cleanest use case — imperative DOM methods: