Refs idea
📚 What are React Refs? A ref (reference) is a way to hold a mutable value that persists across renders WITHOUT triggering a re-render when it changes. The most common use is to get a direct reference to a DOM element -- like grabbing an input to call .focus() on it. You create refs with useRef() a…
Appy Says…
Most of the time React handles the DOM for you. But sometimes you need to reach into the DOM directly — focus an input, play a video, measure an element's size. That's what refs are for.
What are Refs?
useRef gives you a mutable container object ({ current: ... }) that persists across renders. Attach it to a DOM element with the ref prop to get direct access.
- •
const inputRef = useRef<HTMLInputElement>(null); - •
<input ref={inputRef} />— attaches the ref to this DOM node - •Access:
inputRef.current.focus() - •Changing
.currentdoes NOT trigger a re-render (unlike state) - •Also useful for storing a value that persists across renders without causing re-renders
- •Common uses: focus management, media play/pause, measuring dimensions, third-party library integration
Think of it like a direct handle to a Roblox part
In Roblox, you can script a reference to a specific part: local part = workspace.MyPart. Then you manipulate it directly without going through the game loop. useRef gives you a similar direct handle to a DOM element.
How It Works
- •1. Create:
const ref = useRef(null) - •2. Attach:
<input ref={ref} /> - •3. After mount:
ref.currentis the DOM node - •4. During render:
ref.currentis null (element not yet in DOM) - •5. Use in event handlers or useEffect (not during render)
- •6. Storing non-DOM values:
const timerRef = useRef(null); timerRef.current = setInterval(...);
Real-World Examples
- •Auto-focus a search box when modal opens:
useEffect(() => searchRef.current.focus(), []) - •Video player:
videoRef.current.play()on button click - •Infinite scroll: measure container height with
ref.current.getBoundingClientRect() - •Chat input: focus back after sending a message
Key Facts
- •Refs don't trigger re-renders — changing .current is invisible to React's render cycle
- •useRef is the React Hook equivalent of getElementById in vanilla JS
- •React 19 adds native ref as a prop — no more forwardRef needed for component refs
- •For measuring/observing DOM changes, combine useRef with ResizeObserver or IntersectionObserver
Watch Out!
Don't read or write ref.current during the render phase — the element may not be mounted yet. Always access refs in event handlers or inside useEffect (which runs after render).
Remember
useRef gives direct DOM access without triggering re-renders. Attach with ref={myRef}. Access in effects or event handlers — never during render.
What You Learned
- •useRef creates a { current } container — attach to DOM with ref prop for direct access
- •Changing .current doesn't re-render; use in effects/handlers not during render
- •Unlocks: focus management, media control, element measurements, third-party library integration
Key Facts
- →Refs don't trigger re-renders — changing .current is invisible to React's render cycle
- →useRef is the React Hook equivalent of getElementById in vanilla JS
- →React 19 adds native ref as a prop — no more forwardRef needed for component refs
- →For measuring/observing DOM changes, combine useRef with ResizeObserver or IntersectionObserver
Real-World Examples
Remember
useRef gives direct DOM access without triggering re-renders. Attach with ref={myRef}. Access in effects or event handlers — never during render.
Quick Quiz
Ref holds?