DEV Community

Aman Kureshi
Aman Kureshi

Posted on

React useRef: Access DOM Without Re-rendering!๐Ÿ”๐Ÿ“Œ

Ever wanted to access a DOM element or store a value without causing a re-render? Thatโ€™s where useRef comes in!

๐Ÿ”น What is useRef?
Itโ€™s a React Hook that lets you:
Directly access DOM elements
Store mutable values that donโ€™t trigger re-renders

๐Ÿ”น DOM Example:
const inputRef = useRef();
<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>Focus</button>

๐Ÿ”น Non-DOM Example:
const inputRef = useRef();
<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>Focus</button>

๐Ÿ”น Why Itโ€™s Useful:
Avoids unnecessary renders

Perfect for focus management, timers, or tracking previous values

๐Ÿ”ฅ Final Thought: useRef is like a tiny memory box inside your componentโ€”super handy and lightweight!

Top comments (0)