Create a controlled and uncontrolled component in React

Question

Create a controlled and uncontrolled component in React.

Answer

Controlled Component

React controls the form element via state.

import { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>Value: {value}</p>
    </div>
  );
}

✅ State updates on every keystroke — React always knows the current value.

Uncontrolled Component

Uses ref to access the input directly, bypassing React state.

import { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef();

  const handleSubmit = () => {
    alert(inputRef.current.value);
  };

  return (
    <div>
      <input ref={inputRef} placeholder='Type something...' />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

✅ React doesn’t track changes — value lives in the DOM.

Real-World Example

• Controlled: login forms, search bars
• Uncontrolled: contact forms or file uploads

Quick Practice

Create both versions of an email input field — one controlled, one uncontrolled — and compare behavior.

Summary

Controlled components sync with React state; uncontrolled ones rely on direct DOM refs.