What are Controlled and Uncontrolled Components in React? | FullStackPrep.Dev

💡 Concept Name

Controlled vs Uncontrolled Components – These refer to how React manages form input state. Controlled components rely on React state, while uncontrolled components manage their own state via the DOM.

📘 Quick Intro

In React, controlled components bind input elements to React state and handle updates via event handlers. Uncontrolled components use refs to access form values directly from the DOM without syncing with React state.

🧠 Analogy / Short Story

Imagine a smart home: in a controlled setup, every light is controlled via a central app (React state), ensuring synchronization and visibility of the system. In an uncontrolled home, lights are toggled manually without central tracking (DOM manages state).

Controlled components give React full control and visibility of input values. Uncontrolled components are more like standalone systems, working independently without reporting back.

This difference impacts how validation, dynamic behavior, and debugging are handled in your application.

Controlled components may require more boilerplate, but they offer predictability. Uncontrolled ones are quicker to set up, but limited in flexibility.

🔧 Technical Explanation

🎮 Controlled: Input value is driven by React state and updated via onChange handlers.
📋 Uncontrolled: Input value is managed by the DOM. React accesses value using ref.
🔁 Controlled inputs re-render on state change; uncontrolled don’t.
🔍 Controlled forms are better for validation, conditional rendering, and consistency.
🚀 Uncontrolled forms are simpler when you don’t need dynamic or real-time updates.

💻 Real Code Example

// Controlled Component
function ControlledInput() {
  const [name, setName] = useState('');

  return (
    <input
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
    />
  );
}

// Uncontrolled Component
function UncontrolledInput() {
  const inputRef = useRef();

  const handleSubmit = () => {
    alert(inputRef.current.value);
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

❓ Interview Q&A

Q1: What is a controlled component in React?
A: An input element whose value is controlled by React state and updated through event handlers like onChange.

Q2: What is an uncontrolled component?
A: An input element that maintains its own internal state, with values accessed via refs instead of React state.

Q3: Which is better for form validation?
A: Controlled components, because state is accessible and manageable in real-time.

Q4: Can you use both types in one form?
A: Yes, though it’s best to stay consistent where possible to avoid confusion.

Q5: Do controlled components re-render on input change?
A: Yes, because state changes trigger re-renders.

Q6: What React hook is often used with uncontrolled components?
A: useRef() is used to access the DOM node directly.

Q7: Why are controlled components considered more React-idiomatic?
A: They align with React’s state-driven architecture, making them easier to test and debug.

Q8: Are uncontrolled components suitable for dynamic forms?
A: No, they’re limited when inputs depend on state or props.

Q9: When would you prefer an uncontrolled component?
A: When building simple, non-interactive forms or integrating third-party libraries.

Q10: Which is better for performance: controlled or uncontrolled?
A: Uncontrolled may have slightly better performance but less flexibility.

📝 MCQs

Q1. What is a controlled component?

DOM-managed input
Input bound to React state
Readonly component
Styled input

Q2. How does an uncontrolled component access input value?

Via props
Using useState
Using a ref
Using event.target

Q3. Which is better for real-time validation?

Uncontrolled component
Controlled component
Both
Neither

Q4. Which hook is commonly used in uncontrolled components?

useEffect
useMemo
useRef
useCallback

Q5. Do controlled components re-render on change?

No
Yes
Sometimes
Only with props

Q6. Which form type relies on the DOM for state?

Controlled
Uncontrolled
Managed
Hybrid

Q7. Can controlled and uncontrolled inputs coexist?

No
Yes, but not ideal
Always
Only with hooks

Q8. Which is easier to debug?

Uncontrolled component
Controlled component
Equal
DOM input

Q9. Which form type fits better in React’s philosophy?

Uncontrolled
Controlled
Ref-driven
Direct DOM

Q10. When should uncontrolled components be preferred?

When building dynamic forms
For simple, non-dynamic forms
When using Redux
When managing global state

💡 Bonus Insight

Controlled components give you full visibility and control of form behavior, enabling features like real-time validation and conditional inputs. Uncontrolled components are ideal when rapid setup is needed and minimal interactivity is expected.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon

What are Controlled and Uncontrolled Components?