Controlled vs. Uncontrolled Components : Working With Forms

Just like in HTML, React uses forms as a way for users to interact with a web page. In React, components (like a form component) can be controlled or uncontrolled.

When a React form's elements (input, textarea, select) derive their value from state, the form is controlled. When a React form's elements derive their value from the DOM, the form is uncontrolled. While the latter is typically how form data is handled when using HTML, the former is typically how form data is handled when using React.

Below is an example of a controlled form. You will see that the value of each input field is set to a state variable:

• Input 1: value={title}
• Input 2: value={author}
• Input 3: value={article}

Each input field then also utilizes an onChange event handler:

• onChange={(e) => setTitle(e.target.value)}
• onChange={(e) => setAuthor(e.target.value)}
• onChange={(e) => setArticle(e.target.value)}

These functions update the state value to reflect what is entered into each input field.

import React, {useState} from "react";


function NewPostForm() {


 const [title, setTitle] = useState("")
 const [author, setAuthor] = useState("")
 const [article, setArticle] = useState("")


 return (
   <div className="form">
     <form>
       <input
         type="text"
         placeholder="Title"
         value={title}
         onChange={(e) => setTitle(e.target.value)}
       ></input>
       <input
         type="text"
         placeholder="Author"
         value={author}
         onChange={(e) => setAuthor(e.target.value)}
       ></input>
       <textarea
         rows="10"
         cols="60"
         placeholder="Write your post"
         value={article}
         onChange={(e) => setArticle(e.target.value)}
       ></textarea>
       <input
         className="submit-button"
         style={{ paddingBottom: "25px" }}
         type="submit"
       ></input>
     </form>
   </div>
 );
}


export default NewPostForm;

When To Use Controlled Components:
At this point you might be thinking, “Sarah, I understand the difference between controlled and uncontrolled components, but so what?” Well, there are a couple of key advantages to using a controlled form in React:

• Sharing Form Values: Because controlled form values are stored in state, values can be shared easily amongst components. One can either pass down values (parent component to child component) using props or pass up values (child component to parent component) using a callback function. This means that state does not need to be housed in the same component as the form.
• Element Validation: Because controlled form values are stored in state, one can set up validation functionality that a form element value must pass prior to updating the state value. This ensures that state only gets updated when values entered into form elements meet the criteria set.

In most instances, formal React documentation recommends using controlled components to implement forms.

When To Use Uncontrolled Components:
While controlled components help to ensure maximum flexibility, it may sometimes feel tedious to set them up. Especially when forms get long (and include many elements), you may question if writing an event handler and state for each element is essential. According to formal React documentation, there are a couple of situations where it may be favorable to utilize uncontrolled components:

• When you are converting a pre-existing codebase to React
• When you are integrating a React application with a non-React library

Conclusion:
In most cases, one should set up a React form to be controlled. While controlled forms require that state and an event handler be set up for each form element, the controlled aspect allows for form values to be used across other components with ease.

Resources:
"Uncontrolled Components." Legacy React, legacy.reactjs.org/docs/uncontrolled-components.html.
Accessed 26 Apr. 2023.
"Forms." Legacy React, https://legacy.reactjs.org/docs/forms.html. Accessed 26 Apr. 2023.
"Sharing State Between Components." React,
react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components. Accessed 26 Apr. 2023.
"Controlled Components." Canvas - Flatiron School, Accessed 26 Apr. 2023.