React: Controlled vs. Uncontrolled
React has built-in support for forms, because HTML and the DOM by default support forms.
React Forms vs. HTML Forms
HTML Forms: There’s a form tag, and labels for the input, the label attribute would be for
React Forms: Similar form tag, React uses htmlFor prop that matches the id on its corresponding input
Inputs in React can be one of two types: controlled or uncontrolled.
An uncontrolled input is the simpler of the two. It’s the similar to a plain HTML input. React inserts it on the page, and the browser keeps track of the rest. Uncontrolled inputs require less code. They manage their own value. Just like with a plain HTML form, the value is kept in the input’s DOM node. No need to manually track it.
In the below code sample, all the inputs are uncontrolled, because we weren’t passing the value prop that would tell them what value to display.
If needed we can actively track the value of these elements using refs.
A ref holds a reference to a DOM node . To get the value from an uncontrolled input, we need a reference to it, which we get by assigning a ref prop.
Using it we can read the value whenever needed.
Adding refs to our order form inputs, from earlier example:
We created 3 refs with the useRef hook, bound the refs to the inputs with the ref prop. When the component is first rendered, React sets up the refs. “nameRef.current” refers to the name input’s DOM node, similar to other 2 refs. These refs hold the same values as the ones you’d get if you ran a document.querySelector('input[id=name]') in the browser console.
Uncontrolled inputs are the best choice when we only need the value at a specific time, such as when the form is submitted.
If we need to inspect or validate or transform the value on every keypress,
controlled input is a better solution.
Get Shweta’s stories in your inbox
Join Medium for free to get updates from this writer.
Let’s convert our example using controlled inputs:
“handleSubmit” function can then do whatever is needed with the values like validate them, transform them etc.
Controlled vs. Uncontrolled: Which to Use?
As per React docs:
Of the two styles, controlled inputs are the more “React-y way” of doing things, where UI reflects state.
Controlled inputs best for :
- Instantly validating the form on every keypress: useful if we need to keep the Submit button disabled until everything is valid.
- Handling formatted input, like a email id field, or preventing junk characters from being typed.
- Keeping multiple inputs in sync with each other when they are based on the same data.
But there are some downsides.
Controlled Inputs are More Complex.
Controlled Inputs Re-render on Every Keypress.
Uncontrolled Inputs Have Even Less Boilerplate.
But this is mostly fine. Renders are fast. For small-to-medium forms we probably won’t even notice. As the number of inputs grows or if the form has child components that are expensive to render, keypresses might start to feel to lag. For uncontrolled inputs the browser takes care of the whole thing.
We don’t need to update state, which means we don’t need to re-render.
Every keypress bypasses React and goes straight to the browser.
So, we can agree to the idea that uncontrolled inputs might actually be the better default. If uncontrolled inputs work in your case we can definitely use them. They’re easier, and faster.
