Using Refs for Uncontrolled Inputs
Learn the correct and idiomatic use of React’s useRef hook to read form values directly from the DOM and understand when uncontrolled components are a better choice than controlled ones.
We'll cover the following...
Controlled components keep the UI and state perfectly in sync, but they can feel verbose for quick, low-logic forms or when integrating with third-party widgets that manage their own internal state. In such cases, letting the DOM hold the value and reading it on demand via useRef can be simpler and sometimes more performant. Remember, useRef allows us to create a reference to a DOM element or a mutable value that persists across renders without reinitializing. The trade-off is that we don’t get real-time React state updates as the user types; instead, we explicitly read values when needed (for example, on form submission).
Understanding the uncontrolled inputs
An uncontrolled input is a standard <input> (or <textarea>, <select>) whose current value lives in the DOM, not in React state. With useRef, we attach a ref to the element, and later access ref.current.value to read the input’s value at that moment.