Home/Learn/React/Controlled and Uncontrolled Inputs

Controlled and Uncontrolled Inputs

Beginner

Forms

A controlled input renders from state and updates it on every keystroke. An uncontrolled input keeps its own value in the DOM. Mixing them produces React's most familiar warning.

Overview

React gives you two ways to own a form field, and the choice has real consequences. Controlled means state is the single source of truth, so you can validate as the user types, format the value, disable submit, and read everything at any moment. Uncontrolled means the DOM keeps the value and you read it when you need it, which is less code and fewer renders. Most application forms want controlled behaviour, most large forms want uncontrolled for performance, and the library everybody uses exists to give you both at once.

Controlled

value plus onChange. Every keystroke is a state update and a render.

value + onChange, and one handler for many fields

const [email, setEmail] = useState('')

<input
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

// Because state owns it, you can act on every keystroke
<input
  value={pin}
  onChange={(e) => setPin(e.target.value.replace(/\D/g, '').slice(0, 6))}
/>
// digits only, max six — the user cannot type anything else

// The other input types
<input type="checkbox" checked={agreed} onChange={e => setAgreed(e.target.checked)} />
<select value={level} onChange={e => setLevel(e.target.value)}>
<textarea value={notes} onChange={e => setNotes(e.target.value)} />

// Several fields in one object
const [values, setValues] = useState({ name: '', email: '' })
const onChange = (e) =>
  setValues(v => ({ ...v, [e.target.name]: e.target.value }))
<input name="email" value={values.email} onChange={onChange} />

Uncontrolled

The DOM holds the value; you read it on submit. Fewer renders, less control.

defaultValue and FormData

function SignupForm() {
  const formRef = useRef(null)

  function handleSubmit(e) {
    e.preventDefault()
    const data = Object.fromEntries(new FormData(e.currentTarget))
    signup(data)                        // { email: '…', password: '…' }
  }

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <input name="email" type="email" defaultValue="" required />
      <input name="password" type="password" minLength={8} required />
      <button>Sign up</button>
    </form>
  )
}

// defaultValue, not value — it seeds the field and then lets go.
// No re-render happens while typing at all.

// This is the right default for a file input, which cannot be
// controlled, and for large forms where per-keystroke renders hurt.

The Warning Everybody Hits

Switching an input between controlled and uncontrolled, almost always via undefined.

Start at "", never undefined

// "A component is changing an uncontrolled input to be controlled"
const [name, setName] = useState()          // undefined
<input value={name} onChange={...} />       // uncontrolled on the first
                                            // render, controlled after
// Fix: never start as undefined
const [name, setName] = useState('')

// Same bug from async data
const [values, setValues] = useState({})
<input value={values.email} onChange={...} />    // undefined until loaded

// Fixes, in order of preference:
value={values.email ?? ''}                       // always a string
// or do not render the form until the data arrives
if (isLoading) return <FormSkeleton />
// or reset the whole form with a key when the data lands
<ProfileForm key={user.id} user={user} />

// null is not a valid value either — it produces the same warning.

Key Points to Remember

1A controlled input renders from state and updates it on every keystroke, which enables live validation and formatting
2An uncontrolled input keeps its value in the DOM and is read via FormData on submit — no renders while typing
3defaultValue seeds an uncontrolled input; value makes it controlled
4Starting state as undefined or null makes an input switch from uncontrolled to controlled, producing React's classic warning
5A file input cannot be controlled, and large forms often prefer uncontrolled for performance

Interview Questions

What is the difference between a controlled and an uncontrolled input?

Easy

What causes the "changing an uncontrolled input to be controlled" warning?

Medium

When would you deliberately choose uncontrolled inputs?

Medium

Ask Aria about Controlled and Uncontrolled Inputs

Your personal AI tutor — ask anything about this concept

Revision Status

Personal Notes

Discussion

Loading discussion…

Real-Time Data in React

Validation — Rules, Timing and Messages