Drills Repository
35 Drills · All Belts · useref
forwardRef required for parent ref access
Function components do not automatically expose their internal DOM nodes to a parent through a normal ref prop. Only forwardRef (or accepting ref as a prop in newer React versions) allows a component to receive a ref and forward it down to an internal DOM node.
refs for visible UI state
Values that need to appear in rendered UI must be stored in state, since React only re-renders a component in response to a state update. Updating a ref does not notify React of any change, so the displayed count would remain stale until some unrelated render occurred.
Ref updates do not trigger renders
Updating a ref never triggers a React render, since refs are mutable containers that persist across renders without React tracking changes to ref.current for reconciliation. The counter value in counterRef.current changes internally, but the JSX display stays stale until some other state or prop update causes a re-render.
useRef does not trigger re-render
React does not track changes to ref.current for rendering purposes. A ref is simply a mutable object whose value persists across renders, and mutating countRef.current increments the stored number internally without scheduling any re-render, so the displayed JSX stays unchanged.
useRef vs useState for interval IDs
Interval IDs are implementation details that do not affect the visual output, so useRef is the appropriate choice. Refs persist across renders without triggering new renders when updated. State would work functionally but would create unnecessary renders, while local variables reset every render.
ref identity persistence
useRef returns the same object on every render, which is why refs can persist mutable values across renders. Only the current property changes.
refs are local per component instance
Each component instance gets its own separate ref object. React stores hook state independently per rendered instance, so mutating one ref does not affect another component copy.
regular variables reset across renders
Component functions rerun on every render, so ordinary variables are recreated each time. useRef preserves the same mutable object across renders without causing re-renders.
Ref callback cleanup behavior
Callback refs participate in React's commit phase lifecycle, and React runs the cleanup returned by a previous callback before detaching or replacing that ref. This lets structures like a Map of DOM nodes stay accurate without holding stale references.
conditional ref forwarding
React sets a ref to null when its associated DOM node is removed from the tree during reconciliation. Because the input no longer renders, the forwarded ref loses its target and cannot persist like a cached reference.
imperative handle hides DOM node
useImperativeHandle replaces the value exposed through a ref with the custom object it returns, rather than extending access to the underlying DOM node. Since the parent no longer receives the DOM node itself, accessing ref.current.style.opacity returns undefined because style was never exposed.
forwardRef component still needs to use ref
forwardRef only allows a component to receive a ref as an argument; React does not automatically attach that ref to anything. The component must explicitly forward the received ref to a DOM node or another ref-capable component, or ref.current stays null.