Controlled and uncontrolled component in React.js

The React docs state:

In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

Background info:

Form elements, includes input, select, text area. They all keep a internal state and updates every time the user provides input.

Controlled component(recommended way):

React is the one who controlled these form elements. More specifically, react is in charge of controlling when and how to render it based on the internal logic of setState method.

Uncontrolled component:

The developer gets access to the HTML element in question by using React.createRef() methods, which allows the developer to integrate React with other JS-based libraries.




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store



A front-end developer who likes designing stuffs. Technical blog rookie. Loving sharing.