How to Create Uncontrolled Component in React: Simple Guide

In React, an uncontrolled component is created by using a ref to access the form element's value directly instead of controlling it with React state. You attach a ref to the input and read its value when needed, letting the DOM handle the input state.

Syntax

An uncontrolled component uses a ref to access the DOM element directly. You create a ref with React.useRef() and attach it to the input using the ref attribute. You then read the input's value from the ref when needed, such as on form submission.

• const inputRef = React.useRef(null); creates the ref.
• <input ref={inputRef} /> attaches the ref to the input.
• Access the value with inputRef.current.value.

jsx

import React, { useRef } from 'react';

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

  function handleSubmit(event) {
    event.preventDefault();
    alert('Input value: ' + inputRef.current.value);
  }

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

export default UncontrolledInput;

Example

This example shows a simple form with an uncontrolled input. The input's value is not stored in React state. Instead, a ref is used to get the current value when the form is submitted. The alert shows the typed text.

jsx

import React, { useRef } from 'react';

export default function UncontrolledExample() {
  const inputRef = useRef(null);

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

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="nameInput">Name: </label>
      <input id="nameInput" type="text" ref={inputRef} placeholder="Type your name" />
      <button type="submit">Send</button>
    </form>
  );
}

Output

When you type text in the input and click Send, an alert pops up showing: "You typed: [your input]"

Common Pitfalls

Common mistakes when using uncontrolled components include:

• Trying to update the input value via React state, which defeats the purpose of uncontrolled inputs.
• Not attaching the ref correctly, causing inputRef.current to be null.
• Accessing inputRef.current.value before the component mounts or after it unmounts.

Remember, uncontrolled inputs rely on the DOM to manage the value, so React does not re-render on input changes.

jsx

import React, { useRef } from 'react';

// Wrong: Trying to control input value with state and ref together
function WrongExample() {
  const inputRef = useRef(null);
  const [value, setValue] = React.useState('');

  return (
    <input
      ref={inputRef}
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  );
}

// Right: Use ref only without value or onChange
function RightExample() {
  const inputRef = useRef(null);
  return <input ref={inputRef} />;
}

Quick Reference

• Use useRef() to create a ref.
• Attach the ref to the input with ref={inputRef}.
• Access the input value with inputRef.current.value.
• Do not use value or onChange props for uncontrolled inputs.
• Use uncontrolled components when you want simple forms without React state.

Key Takeaways

Uncontrolled components use refs to access input values directly from the DOM.

Do not mix React state with uncontrolled inputs; avoid using value and onChange props.

Use useRef() to create a ref and attach it to the input element.

Read the input value from ref.current.value when needed, like on form submit.

Uncontrolled components are simpler for basic forms where you don't need to track input changes.