Uncontrolled Components in Forms

An uncontrolled component is a form element that keeps its own value in the browser, the way a plain HTML input does. React renders the input once and then leaves the typed text alone. Your code reads the value only at the moment it needs it, which is usually when the user submits the form.

To read the value later, the component needs a way to reach the actual input element on the page. React provides this with a ref, created by the useRef hook. A ref is an object with a current property, and when you pass it to an element's ref prop, React stores that element in ref.current