What does `useRef` do and when should you use it?

Summary

useRef holds a mutable value that persists across renders without causing re-renders when it changes.

Longer Answer

Refs are commonly used to access DOM nodes, store timer IDs, keep previous values, hold imperative handles, or keep mutable data that event handlers need but UI does not render. The .current property can be changed freely.

Do not read or write refs during render in ways that affect output. If a value affects UI, it should usually be state. If it is purely imperative or mutable bookkeeping, a ref may be correct.

Key Points

• Refs are commonly used to access DOM nodes, store timer IDs, keep previous values, hold imperative handles, or keep mutable data that event handlers need but UI does not render
• The .current property can be changed freely
• Do not read or write refs during render in ways that affect output
• For 'What does useRef do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Do not read or write refs during render in ways that affect output. If a value affects UI, it should usually be state. If it is purely imperative or mutable bookkeeping, a ref may be correct

Comparison / Tradeoffs

Do not read or write refs during render in ways that affect output. If a value affects UI, it should usually be state. If it is purely imperative or mutable bookkeeping, a ref may be correct. |

Summary

useRef holds a mutable value that persists across renders without causing re-renders when it changes.

Longer Answer

For 'What does useRef do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Do not read or write refs during render in ways that affect output. If a value affects UI, it should usually be state. If it is purely imperative or mutable bookkeeping, a ref may be correct.

Key Points

• For 'What does useRef do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs
• Do not read or write refs during render in ways that affect output
• If a value affects UI, it should usually be state
• Use the answer to connect the concept back to a realistic production or interview scenario for 'What does useRef do and when should you use it?'

Comparison / Tradeoffs