Hook · Mutable reference
useRef
A box that persists
useRef gives you a box with a .current property that survives between renders but, unlike state, does not trigger re-renders when you change its contents.
Two honest uses
Access the DOM: pass it to a node with ref={myRef} and read myRef.current after mount.
Store values between renders: counters, timer IDs, previous values — anything you need to remember but don't want to trigger re-renders.
Why not state
If rendering the value doesn't change the UI, it shouldn't be in state. Keeping it in a ref avoids render cycles and keeps the component faster.
Common pitfalls
- 01Reading or writing .current during render makes the component impure — do it in effects or event handlers.
- 02Refs are not reactive: changing .current does not cause the component to re-render.
- 03Do not use a ref to store something you want to show in the UI — use state for that.
Was this helpful?
Sign in to give feedback