reactjs
/

Uncontrolled Components – Letting the DOM Handle State

Last Sync: Today

On this page

6
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

reactjs

Uncontrolled Components – Letting the DOM Handle State

What are Uncontrolled Components?

In an uncontrolled component, the form data is handled by the DOM itself, rather than by a React component's state. Instead of writing an event handler for every state update, you use a ref to pull the values from the DOM when you need them (e.g., when the form is submitted).

Basic Implementation with useRef

To create an uncontrolled component, you use the useRef hook to create a reference to the DOM element and access its .value property directly.

React JSXRead-only
1
import { useRef } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Input Value: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Name:</label>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

Initial Values (defaultValue)

In the React rendering lifecycle, the value attribute on form elements overrides the value in the DOM. With uncontrolled components, you often want React to specify the initial value, but leave subsequent updates uncontrolled. For this, use defaultValue instead of value.

React JSXRead-only
1
/* For text/select inputs */
<input type="text" defaultValue="Kishore" />

/* For checkboxes/radios */
<input type="checkbox" defaultChecked={true} />

When to Use Uncontrolled Components

  • File Inputs: The <input type="file"> is always uncontrolled in React because its value is read-only from a script perspective.
  • Simple Forms: When you don't need instant validation or custom UI feedback while the user types.
  • Non-React Integration: When integrating with third-party DOM libraries (like jQuery plugins) that manage their own internal state.
  • Performance: In extremely large forms where state updates on every keystroke might cause lag (though useMemo or React Hook Form are usually better solutions here).

Controlled vs. Uncontrolled

FeatureControlledUncontrolled
Source of TruthReact StateDOM
Value AccessImmediate (on change)On demand (via ref)
Instant ValidationEasyDifficult
BoilerplateHigherLower
File Upload SupportNoYes

The Special Case: File Inputs

React JSXRead-only
1
function FileUpload() {
  const fileInput = useRef(null);

  const handleUpload = (e) => {
    e.preventDefault();
    const file = fileInput.current.files[0];
    console.log('Selected file:', file.name);
  };

  return (
    <form onSubmit={handleUpload}>
      <input type="file" ref={fileInput} />
      <button type="submit">Upload</button>
    </form>
  );
}

Try it yourself

import React, { useRef } from 'react';

function FastForm() {
  const nameRef = useRef(null);
  const emailRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    const data = {
      name: nameRef.current.value,
      email: emailRef.current.value,
    };
    console.log('Form Submitted (Uncontrolled):', data);
    alert(`Submitted! Check the console.`);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Uncontrolled Form</h2>
      <p>Notice how there are no state updates while you type.</p>
      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '10px' }}>
          <label>Name: </label>
          <input 
            type="text" 
            ref={nameRef} 
            defaultValue="Guest User" 
          />
        </div>
        <div style={{ marginBottom: '10px' }}>
          <label>Email: </label>
          <input 
            type="email" 
            ref={emailRef} 
            placeholder="example@mail.com" 
          />
        </div>
        <button type="submit">Log Data</button>
      </form>
    </div>
  );
}

export default FastForm;

Test Your Knowledge

Q1
of 3

Which prop is used to set the initial value of an uncontrolled input?

A
value
B
initialValue
C
defaultValue
D
startValue
Q2
of 3

What is the primary tool used to access uncontrolled input values?

A
useState
B
useRef
C
useContext
D
useEffect
Q3
of 3

Which type of input is ALWAYS uncontrolled in React?

A
checkbox
B
password
C
file
D
number

Frequently Asked Questions

Can I use both in the same form?

Yes, it is common to have a controlled text input for validation while having an uncontrolled file input for uploads.

Is it 'bad' to use uncontrolled components?

Not at all. While controlled components are the 'React way,' uncontrolled components are perfectly valid for simple use cases or specific constraints like file inputs.

How do I clear an uncontrolled input?

You must manually manipulate the DOM: inputRef.current.value = ''.

Previous

react controlled components

Next

react context api

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.