If you'll go to the official React website it says that . It also mentions that in some cases you can go with an uncontrolled option but do not say what are these cases explicitly. Let’s try to dive into it and see the pros and cons of this approach. the recommended way to use inputs is to control them via React state It’s all about control Controlled input values are being kept in the local state. Every time the user changes the content of the input, the function updates the React state, Component re-renders with the new value passed to Input. onChange SimpleControlledForm = { [email, setEmail] = useState( ) [name, setName] = useState( ) onSubmit = useCallback( {
    e.preventDefault()
    sendData({ email, name })
  }, [email, name]) ( <input name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  )
} const => () const '' const '' const ( ) => e return < = > form onSubmit {onSubmit} Let browser do its job On the other hand, uncontrolled inputs are being handled by the browser itself. So you don’t have direct control over inputs value in the component, but you can use ref to get access to it. SimpleUncontrolledForm = { onSubmit = useCallback( {
    e.preventDefault() { email, name } = e.target
    sendData({ : email.value, : name.value })
    e.target.reset()
  }, []) ( <input name="email" />
      <input name="name" />
      <button type="submit">Submit</button>
    </form>
  )
} const => () const => e const email name return < = > form onSubmit {onSubmit} Looking at these two examples you can clearly say that the second one looks cleaner and less verbose than the first one. You don’t need to instantiate state, pass the value to each input and override onChange handlers. An uncontrolled form doesn’t have state, so every time you type, your component doesn’t re-render, increasing overall performance. By leveraging uncontrolled inputs you’re trusting browser with form management and become closer to the native implementation. Why do you need to write something that was already created anyway? 🤔 But what if I need to handle complex form, perform validation or handle custom submit logic? Use refs. With new Hooks API, refs became a more stable and better way to control DOM. Consider the following example where you need to access forms values outside of the function. onSubmit SimpleUncontrolledForm = { form = useRef() onSubmit = useCallback( {
      e.preventDefault() { email, name } = e.target
      sendData({ : email.value, : name.value })
      e.target.reset()
    }, []
  ) sendValues = { { email, name } = form.current
    sendData({ : email.value, : name.value })
  } ( <form ref={form} onSubmit={onSubmit}>
        <input name="email" />
        <input name="name" />
        <button type="submit">Submit</button>
      </form>
      <button onClick={sendValues}>Send values</button>
    </>
  )
} const => () const const => e const email name const => () const email name return <> Embrace HTML5 Browser API provides you with a lot of useful features to handle forms and inputs. — use the reset function to clear all your field form.reset() — use it to programmatically submit the form form.submit() — checks validation constraints and returns true or false form.reportValidity() — interface that allows you to access all forms on the page. document.forms — set of properties and methods that allows you to create complex validations on the fields. min, max, pattern, email, required — all of that and much more is covered by it. Constraint Validation API What about libraries that I can use with uncontrolled inputs? Sure! allows you to build a form and perform validation on it without the hassle. helps you build complex forms with nested fields, validation using uncontrolled components. React-Hook-Form Unform When it makes sense to use controlled inputs then? Basically you need to choose controlled inputs when your component on every type. For example, you want to display or send all form values as you type (imagine autocomplete field for the search bar). Or if you need to pass input value to child component through props. There are quite a few cases where you have to use it. you need to re-render Conclusion I believe that uncontrolled components are currently undervalued and should have more presence in modern React applications. Indeed they’re not gonna solve all your problems but would help increase the performance and reliability of your components in many cases.

Target

Follow my thoughts on Twitter

Read My Stories

Too Long; Didn't Read

Making security fun one episode at a time

You Might Not Need Controlled Components - A React Story

Too Long; Didn't Read

Company Mentioned

Ilya Lyamkin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

You Might Not Need Controlled Components - A React Story

Too Long; Didn't Read

Company Mentioned

Ilya Lyamkin

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES