useRef as Container Ref as a Container
Last updated: 2026-11-02
useRef as Container Ref as a Container
A ref is not only for the DOM: it is a sticky-note box that survives renders and suits data such as timer ids, the previous value or a mounted flag that changes without you wanting a re-render. It is lighter than state and safer than a module-level variable, because every component instance is isolated. A ref is the right home for data that describes the process rather than the interface: it has to outlive a render, but nothing on screen depends on it.
| Group | Effects & Performance |
|---|---|
| Kind | Pattern |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
const timerRef = useRef(null)
timerRef.current = setInterval(...) // store
clearInterval(timerRef.current) // read
// the lazy initialization idiom:
if (ref.current === null) ref.current = expensiveInit()Returns：No return value; this entry describes an encoding pattern rather than a function.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Every click on +1 raises the "Current" number while "previous" keeps showing the value from before the change — the ref keeps a historical snapshot without causing extra renders.💡 Key Points
🏷️ More Effects & Performance
💡 Related Cases
📚 Related Tutorials
❓ FAQ
