0Pricing
React Academy · Lesson

Uncontrolled Inputs with useRef

Access DOM input values via refs instead of state for simple form scenarios.

Welcome

In this lesson you will use uncontrolled inputs with useRef to access DOM input values without managing them in React state.

Controlled vs Uncontrolled

A **controlled input** has its value driven by React state (value + onChange). An **uncontrolled input** manages its own value in the DOM; React reads it via a ref only when needed.
// Controlled
<input value={name} onChange={e => setName(e.target.value)} />

// Uncontrolled
const nameRef = useRef();
<input ref={nameRef} defaultValue="" />

All lessons in this course

  1. Uncontrolled Inputs with useRef
  2. File Input & Reading File Data
  3. Drag & Drop File Upload UI
  4. Uploading Files to a Backend API
← Back to React Academy