What are common use cases for useRef?

What are common use cases for useRef?

• A. To trigger re-renders by updating a state variable.
• B. To store computed values derived from props.
• C. To create a new component instance.
• D. To access DOM nodes or store mutable values that persist without triggering re-renders.

Answer: (D)

The main idea being tested is that useRef provides a mutable value that survives across renders without causing a re-render, and it can be used to access DOM nodes imperatively. A ref created by useRef returns an object with a current property. You can read or write to current, and that value persists from render to render. Importantly, updating current does not trigger a re-render, which makes useRef ideal for keeping data that you don’t want to drive UI updates. Common use cases include two big patterns. First, accessing DOM nodes directly. By attaching a ref to a DOM element, you can interact with that element imperatively—read its value, call methods like focus or scroll, or measure its size—without going through React state. For example, you can store a reference to an input and call focus() when a button is clicked. Second, storing mutable values that need to persist across renders but shouldn’t cause re-renders. You might keep a timer ID, the previous value of a prop or state, or a mutable accumulator. Since changing current doesn’t trigger a render, you can update it freely without re-running the component’s render cycle. If you needed changes to reflect in the UI, you’d use state instead, because state updates trigger re-renders. useRef is the right tool when you want a stable, persisting value or a direct handle to a DOM node without automatically re-rendering.

The main idea being tested is that useRef provides a mutable value that survives across renders without causing a re-render, and it can be used to access DOM nodes imperatively.

A ref created by useRef returns an object with a current property. You can read or write to current, and that value persists from render to render. Importantly, updating current does not trigger a re-render, which makes useRef ideal for keeping data that you don’t want to drive UI updates.

Common use cases include two big patterns. First, accessing DOM nodes directly. By attaching a ref to a DOM element, you can interact with that element imperatively—read its value, call methods like focus or scroll, or measure its size—without going through React state. For example, you can store a reference to an input and call focus() when a button is clicked.

Second, storing mutable values that need to persist across renders but shouldn’t cause re-renders. You might keep a timer ID, the previous value of a prop or state, or a mutable accumulator. Since changing current doesn’t trigger a render, you can update it freely without re-running the component’s render cycle.

If you needed changes to reflect in the UI, you’d use state instead, because state updates trigger re-renders. useRef is the right tool when you want a stable, persisting value or a direct handle to a DOM node without automatically re-rendering.