React Academy · Lesson

Uncontrolled Inputs with useRef

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

Uncontrolled Inputs with useRef is a free React Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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="" />

Reading the Value on Submit

With uncontrolled inputs, read the value when the user submits the form by accessing `ref.current.value`. No state updates happen while the user types.

function Form() {
  const nameRef = useRef();
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(nameRef.current.value);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input ref={nameRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

defaultValue vs value

For uncontrolled inputs, use `defaultValue` (not `value`) to set the initial value. Setting `value` without `onChange` makes React warn and the input becomes read-only.

<input ref={nameRef} defaultValue="Initial text" />

When to Use Uncontrolled Inputs

Uncontrolled inputs are useful for: simple forms where you only need values on submit, file inputs (which cannot be controlled by React), and performance-critical inputs where avoiding re-renders matters.

Resetting an Uncontrolled Input

To reset an uncontrolled input, set `ref.current.value = ''` imperatively. Or, change the component's `key` prop to force React to remount it with a fresh DOM node.

// Reset imperatively
nameRef.current.value = '';

// Or remount
setFormKey(k => k + 1);
<input key={formKey} ref={nameRef} />

Multiple Refs for Multiple Inputs

For forms with multiple uncontrolled fields, create a separate ref for each input. Access each ref's `.current.value` on submit.

const emailRef = useRef();
const passwordRef = useRef();

<input ref={emailRef} type="email" />
<input ref={passwordRef} type="password" />

Focusing on Mount

useRef is often used to auto-focus an input when a component mounts. Read the ref inside useEffect after mount.

const inputRef = useRef();
useEffect(() => {
  inputRef.current?.focus();
}, []);
<input ref={inputRef} />

Uncontrolled Inputs and Validation

Validating uncontrolled inputs requires reading values imperatively on submit. This is messier than controlled inputs for real-time validation. Prefer controlled inputs when you need immediate feedback.

The useRef Trade-off

Uncontrolled inputs avoid re-renders but give up React's reactivity. You cannot conditionally render based on the input value in real time without reading the ref and updating state manually.

Quick Check

Which prop should you use to set an initial value for an uncontrolled input in React?

Recap

Uncontrolled inputs use refs to read values on demand. Use defaultValue to set initial values, read ref.current.value on submit, and reset by clearing the ref value or changing the key.

Up Next

Next lesson: **File Input & Reading File Data** — you will handle file inputs, read metadata and image data with FileReader.

Frequently asked questions

Is the “Uncontrolled Inputs with useRef” lesson free?

Yes — the full text of “Uncontrolled Inputs with useRef” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Uncontrolled Inputs with useRef”?

Access DOM input values via refs instead of state for simple form scenarios. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Uncontrolled Inputs with useRef” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy