Controlled vs Uncontrolled Components

Every form in the MERN Blog — login, register, create post, edit post — needs to collect input from the user and send it to the Express API. React offers two approaches for managing form inputs: controlled components, where React state owns the input value and every keystroke updates state, and uncontrolled components, where the DOM owns the value and you read it via a ref when needed. Understanding the difference — and knowing which pattern to use — is the foundation of every form you will build in the MERN stack.

Controlled vs Uncontrolled — Side by Side #

Controlled Component — Full Example #

import { useState } from 'react';

function SearchInput({ onSearch }) {
  // React owns the value
  const [query, setQuery] = useState(''); // ✓ initialised to empty string, not null

  const handleChange = (e) => {
    setQuery(e.target.value);  // every keystroke updates state
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(query);           // read from state — always current
  };

  const handleClear = () => {
    setQuery('');              // programmatic clear — easy with controlled
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={query}           {/* controlled: value comes from state */}
        onChange={handleChange} {/* every keystroke syncs DOM → state */}
        placeholder="Search posts..."
      />
      {query && <button type="button" onClick={handleClear}>×</button>}
      <button type="submit">Search</button>
    </form>
  );
}

Uncontrolled Component — When to Use #

import { useRef } from 'react';

// Uncontrolled: useful when you only need the value on submit
// and do not need live validation or programmatic updates
function SimpleSearchForm({ onSearch }) {
  const inputRef = useRef(null); // ref points to the DOM input

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(inputRef.current.value); // read from DOM on submit
    inputRef.current.value = '';      // clear by mutating the DOM ref
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        ref={inputRef}           {/* no value prop — DOM owns value */}
        placeholder="Search..."
        defaultValue=""          {/* initial value (not controlled) */}
      />
      <button type="submit">Search</button>
    </form>
  );
}

// ── When uncontrolled is appropriate ─────────────────────────────────────────
// ✓ File inputs: <input type="file" ref={fileRef} /> (file inputs cannot be controlled)
// ✓ One-off reads with no validation or live feedback needed
// ✓ Integrating with non-React DOM libraries that manage their own state

// ── Controlled is better when ─────────────────────────────────────────────────
// ✓ Live validation (show errors as user types)
// ✓ Conditional disabling based on input value
// ✓ Transforming input (auto-capitalise, format phone number)
// ✓ Programmatic reset after form submission
// ✓ Pre-populating edit forms from fetched data

Generic onChange Handler for Multiple Fields #

// One handler for all form fields using the input's name attribute
function LoginForm() {
  const [formData, setFormData] = useState({ email: '', password: '' });

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      // Computed property key: uses the input's name attribute
      [name]: type === 'checkbox' ? checked : value,
    }));
  };

  return (
    <form>
      <input
        name="email"    {/* name must match the state key */}
        type="email"
        value={formData.email}
        onChange={handleChange}
      />
      <input
        name="password"
        type="password"
        value={formData.password}
        onChange={handleChange}
      />
      <input
        name="rememberMe"
        type="checkbox"
        checked={formData.rememberMe}
        onChange={handleChange}
      />
    </form>
  );
}

Common Mistakes #

Mistake 1 — Setting value without onChange (accidental read-only) #

❌ Wrong — controlled input with no way to update it:

<input value={email} />
{/* React warning: value prop without onChange — input is read-only */}

✅ Correct — always pair value with onChange:

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

Mistake 2 — Initialising controlled state with null or undefined #

❌ Wrong — undefined value makes React treat input as uncontrolled initially:

const [email, setEmail] = useState(null); // null → uncontrolled
// Warning: changing uncontrolled input to controlled

✅ Correct — initialise to empty string:

const [email, setEmail] = useState(''); {/* '' → controlled from the start ✓ */}

Mistake 3 — Forgetting to use the name attribute for the generic handler #

❌ Wrong — name attribute missing means [undefined] key is set:

<input value={formData.email} onChange={handleChange} />
{/* e.target.name is '' → setFormData sets { '': value } not { email: value } */}

✅ Correct — always match the name to the state key:

<input name="email" value={formData.email} onChange={handleChange} /> {/* ✓ */}

Quick Reference #