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)