Difference between React controlled and uncontrolled components

If you work with React, you must have encountered this warning message:

Warning: A component is changing an uncontrolled input of type text to be controlled …

Regard to main React’s documentation, you can implement forms with controlled or uncotrolled form elements, but what is the main difference between these two types?

React controlled vs uncontrolled components

Controlled Component:

A controlled component gets value and onChange event from props and notify other components about changes with callbacks:

<input type="text" value={value} onChange={handleChange} />

unControlled component:

An uncontrolled component stores value internally and you can access it with DOM or React ref:

<input type="text" defaultValue="foo" ref={inputRef} />

Consider it, almost developers use controlled components to handle forms in React. For example Formik uses controlled type for implement form elements and you can access to values by an object and it is really easy.

Good Luck.