Single form State or Multiple In React

✅ Why is a single useState object better

1️⃣ Simpler & More Manageable

• Your Approach:

const [formData, setFormData] = useState({
  firstName: '',
  lastName: '',
  email: '',
  password: '',
  confirmPassword: ''
});

const onInput = (e) => {
  setFormData((prevData) => ({
    ...prevData,
    [e.target.name]: e.target.value
  }));
};

✅ All fields are managed in one state object.
✅ The onInput function dynamically updates the corresponding field.
✅ Clean and scalable for larger forms.

---

2️⃣ Avoids Multiple useState Calls

❌ Using Separate useState for Each Field (Bad Approach):

const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');

const onFirstNameChange = (e) => setFirstName(e.target.value);
const onLastNameChange = (e) => setLastName(e.target.value);
const onEmailChange = (e) => setEmail(e.target.value);
const onPasswordChange = (e) => setPassword(e.target.value);
const onConfirmPasswordChange = (e) => setConfirmPassword(e.target.value);

❌ Too many state variables → Harder to maintain as the form grows.

❌ Too many event handlers → onInput is much simpler in the single state approach.

❌ Re-renders multiple times → Each state update triggers a component re-render, making it less performant.

---

3️⃣ Better for Form Validation & Submission

With a single formData object, you can easily:

• Validate all fields before submission.

• Send the entire formData object directly in a fetch() request.

• Use the same object for controlled inputs and data processing.

Example:

const handleSubmit = (e) => {
  e.preventDefault();
  if (!formData.email.includes('@')) {
    alert('Invalid email!');
    return;
  }
  console.log('Form Submitted:', formData);
};

---

✅ Final Verdict: Use a Single useState Object for Forms

🚀 Advantages

✔ Cleaner & more scalable
✔ Better performance (fewer re-renders)
✔ Easier validation & form submission