Express.js Tutorial

ReactJS Introduction React Environment Setup ReactJS versions React JSX ReactJS Components Pros and Cons of ReactJS ReactJS features ReactJS vs Vue ReactJS vs AngularJS ReactJS vs React Native React State React Props React Props Validation React State vs Props React Component API React Component life-cycle React Controlled vs Uncontrolled components React Constructor React Forms React Events React Conditional Rendering React Lists React Keys React Refs React Fragments React Router React CSS React Bootstrap React Animation React Table React Map React Higher Order components React Code-Splitting React Hooks React Context React Flux React Flux vs MVC React Redux React Portals React Error Boundaries MaterialApp class in Flutter ReactJS | Calculator App (Introduction) ReactJS Calculator App - Structure ReactJS Calculator App (Building UI) ReactJS Calculator App (Styling)

Difference between Controlled and Uncontrolled component in ReactJs
2019-11-24 05:19:57

Difference between Controlled and Uncontrolled component in ReactJs

Controlled Component

In the controlled component, the input of the form element is handled by the component rather than the DOM. Controlled components have the functions that govern the data, which passes to them on every onChange event. Here, the changeable (mutable) state is kept inside the state property and updated only with the setState() method.

Like an onChange event, the controlled component also takes its current value by props and notifies the changes by the callbacks.

Controlled components consist of the functions that govern the data, which passes into them on every onChange event. After that, this data will save into state and updated with the setState() method. It makes better control of the component over the elements and data of the forms.

Uncontrolled Component

Uncontrolled components are much similar to the traditional HTML form inputs. The DOM is itself responsible for handling the form data. Here, the elements of HTML maintain their state, which will update when the value of input changes. For writing an uncontrolled component, you have to use a ref to get form values from the DOM. In other words, it is not important to write an event handler for updating of every state.

Difference between Controlled and Uncontrolled Component

S.no. Controlled Component Uncontrolled Component
1 The parent component controls the data. DOM itself controls the data.
2 There is a validation control. There is not any validation control.
3 It provides better control over the elements and data of the form. It provides limited control over the elements and data of the form.
4 It does not maintain the internal state. It maintains the internal state.
5 It accepts the current value in the form of the prop. It uses ref for the current values.