Difference between controlled and uncontrolled components in React.js

Uncontrolled Component

An uncontrolled component is similar to a traditional HTML form input element. You can get the value of the input by accessing the reference to the input.

COPY
import { useRef } from "react";

const Uncontrolled = () => {
  const inputRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(inputRef.current.value);
  };

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

export default Uncontrolled;

Controlled Component

On the other hand, we have a controlled component. Rather than accessing the value of the input through the reference of the element, we can store the value in React state.

COPY
import { useState } from "react";

const Controlled = () => {
  const [inputText, setInputText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(inputText);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Message
      <input
        name="message"
        type="text"
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
      />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default Controlled;

Continue reading

Creating Custom JavaScript Functions: Best Practices and Examples · Deploy React with AWS CDK: Private S3 and CloudFront

Use defaultValue for an uncontrolled initial value, and keep a controlled input consistently controlled throughout its lifetime. React documents these rules in the input reference.