Stop Controlling EVERY Form In React, Use FormData Instead!

Simplify your code with Browser APIs

https://mostlyfocused.com/pages/articles/stop_controlling_react_forms Check this article out on my site for a better reading experience!

One of the first things people learn in React is how to control a form. But unfortunately they never learn to answer a crucial question: should they? In most cases the answer is no. Let’s learn what we can do instead of controlling our forms and the few cases when we should control.

What is a controlled form?

Just so we’re all clear, a controlled form is really just a form with controlled inputs. And a controlled input is when the value of the input comes from state and there is an onChange handler that continuously updates the state with each change. It looks like this:

export default function App() {
  const initForm = { name: '', age: '' };
  const [formInfo, setFormInfo] = useState(initForm);

  const onChange = (e) => {
    const { name, value } = e.target;
    setFormInfo((prevState) => ({ ...prevState, [name]: value }));
  };

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(formInfo);
    setFormInfo(initForm); // reset the form
  };

  const { name, age } = formInfo;

  return (
    <form…