react-useref

What problem does it solve?

This Skill clarifies the appropriate use of useRef in React, distinguishing it from useState and demonstrating its application for DOM manipulation, mutable value storage, and integration with external libraries, while also highlighting modern alternatives like useEffectEvent.

Core Features & Use Cases

• Distinguish useRef vs. useState: Understand when to use useRef (no re-render on change) versus useState (re-render on change).
• DOM Access: Imperatively interact with DOM elements (e.g., focusing inputs, measuring elements).
• Mutable Values: Store values that persist across renders without triggering UI updates (e.g., timer IDs, previous values, first render flags).
• External Libraries: Integrate with non-React libraries that require direct DOM manipulation.
• Modern React 19.2+: Understand the replacement of the useRef workaround for stable callbacks with useEffectEvent.

Quick Start

Use the react-useref skill to understand how to access a DOM input element using a ref.