What is the difference between controlled and uncontrolled components?

React JSX, components and props · Freshers and experienced

Model answer

A controlled component has its value in React state: the input shows state and an onChange handler updates it, so React is the single source of truth. An uncontrolled component keeps its value in the DOM, and you read it when needed with a ref or FormData.

Controlled inputs are good for live validation and dependent fields. Uncontrolled inputs are simpler for basic forms and file inputs.

Learn this topic

React Components and Props Explained with Examples in the course React.js Full Course: Beginner to Advanced.

Sign in to add your own answer.

More questions

• What is JSX?
• What are the rules of JSX?
• What is a component? What is the difference between a function and a class component?
• What are props, and can a component change its own props?
• What is the children prop?
• How do you render a list in React, and why do you need a key?