Controlled and uncontrolled component in React.js

Photo by BRUNO EMMANUELLE on Unsplash

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):

Code example for controlled component

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:

Code example for 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.

Reference:

React: Controlled VS Uncontrolled Components

Glossary of React Terms - React