React Form Playground

🎯 Purpose

This mini project demonstrates the difference between controlled and uncontrolled form inputs in React using a simple form example.

The goal is to understand when React state should control the UI and when letting the DOM handle input values is more appropriate.

---

🧩 React Concepts Used

• useState
• useRef
• Controlled inputs
• Uncontrolled inputs
• Form submission handling
• Input validation with regex

---

📝 Form Structure

• Name → Controlled input (useState)
• Age → Controlled input with numeric validation (regex)
• Email → Uncontrolled input (useRef)
• Submit → Logs all values to the console
• Reset → Clears both React state and DOM-controlled input

---

❓ Why This Approach?

Controlled Inputs

Name and Age are controlled because:

• UI and state must stay in sync
• Validation is required during typing
• React needs to be aware of every change

Uncontrolled Input

Email is uncontrolled because:

• The value is only needed on submit
• Storing it in state would cause unnecessary re-renders
• useRef is sufficient for direct DOM access

---

⚠️ Avoided Anti-Patterns

• defaultValue and value are not used together
• State is not duplicated between React and the DOM
• Form submission prevents default browser reload behavior

---

📌 Key Takeaways

• Controlled inputs are managed by React state
• Uncontrolled inputs are managed by the DOM
• useRef does not trigger re-renders
• Mixing controlled and uncontrolled logic leads to bugs