What are controlled and uncontrolled components?

A Controlled Component is one that takes the current value through the props and notifies of any changes through callbacks such as onChange.

Example:

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

An uncontrolled component is one storing its own state internally, and you can query the DOM via a ref to find its current value as and when needed. Uncontrolled components are a bit closer to traditional HTML.

Example:

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

Note: React is a widely used open-source library used for building interactive user interfaces. It is a web platform licensed under MIT. This is one of the very popular react interview questions.