Forms & Controlled Components
Controlled components, uncontrolled components, form validation, React Hook Form, submit handling
1What is a controlled component in React?
What is a controlled component in React?
Answer
A controlled component is a form element whose value is managed by React state via the value prop and an onChange handler. This means React becomes the single source of truth for this data. Unlike uncontrolled components where the DOM maintains its own value, controlled components provide full control over form data and facilitate real-time validation.
2How to create a controlled input in React?
How to create a controlled input in React?
Answer
A controlled input requires two essential elements: the value prop bound to React state and an onChange handler to update that state. Without onChange, the input would be read-only as React would prevent any modification. This approach ensures React state stays synchronized with the displayed input value, enabling immediate validation or data transformation.
3What is the difference between a controlled and an uncontrolled component?
What is the difference between a controlled and an uncontrolled component?
Answer
The fundamental difference lies in the source of truth for the data. A controlled component stores its value in React state (single source of truth), while an uncontrolled component lets the DOM manage its own value, accessible via a ref. Controlled components offer more control and facilitate real-time validation, but uncontrolled components can be simpler for basic forms without complex validation.
How to manage multiple controlled inputs in the same form?
How to create a controlled checkbox in React?
+17 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Fundamentals
React Hooks
Component Lifecycle
React Router
State Management with Context
Data Fetching & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Fundamentals
TypeScript with React
Next.js Data Fetching
Next.js Server Actions
Next.js Routing & Navigation
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance Optimization
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Advanced Features
Next.js Deployment & Production
Architecture & Design Patterns
React Server Components
Next.js Internationalization
React Security & Best Practices
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free