Controlled vs. Uncontrolled Components in React: When to Use Each

The two types of components describing form input processing in React.js are the Controlled and Uncontrolled Components. They are briefly described below.

• Definition: Controlled Components are those where the state of a React component controls the form data.
• How it works: The component uses the useState hook (or other state management techniques) to monitor and update the inputs' values.

import { useState } from "react";
const ControlledInput = () => {
  const [inputValue, setInputValue] = useState("");
  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );
};

• Definition: The form data is managed by the DOM itself, not React state.
• How it works: You call useRef to access the input's value whenever you need to

import { useRef } from "react";
const UncontrolledInput = () => {
  const inputRef = useRef();
  const handleSubmit = () => {
    alert(`Input Value: ${inputRef.current.value}`);
  };
  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
};

• Use Controlled Components to handle dynamic fields and validation and advanced forms.
• Use Uncontrolled Components for simple forms or where only performance is the issue.

Ready to transform your business with our technology solutions? Contact Us today to Leverage Our ReactJS Expertise.