Uncontrolled Components

In React, uncontrolled components are form elements (like inputs, checkboxes, or textareas) whose state is handled by the DOM itself, rather than being explicitly managed via React’s state system. This means the component maintains its own internal state and you interact with it through refs instead of React’s state hooks or props.

A typical uncontrolled input looks like this:

function UncontrolledForm() {
  const inputRef = useRef();
  const handleSubmit = (e) => {
    e.preventDefault();
    alert(inputRef.current.value); // direct DOM access
  };
  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} type="text" />
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, React is not tracking the input's value via state (useState). Instead, the value is accessed directly from the DOM using ref.

When to use them?

Uncontrolled components are helpful when you need to quickly hook into existing DOM behaviors or you're dealing with non-critical, transient form values. They're also slightly more performant in very large forms, as they avoid re-rendering on each keystroke.

However, for forms that require validation, conditionally displayed UI, or dynamic updates based on input values, controlled components (with state) offer much more flexibility and are often preferred.

What is Superflex.ai?

Your designs are more than static visuals—they’re ready to go live. Superflex.ai takes your Figma files and turns them into fully functional, accessible, and scalable React components. It’s not just about speed (though it’s fast)—it’s about keeping your vision intact, all the way through to production.