React | When to Use FormData in React

Quick notes on when to use FormData vs just using React state.

✅ Use FormData when...

1. Uploading files (e.g. images)

Files can’t be sent via JSON.stringify()
FormData handles multipart/form-data for you

const handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  fetch('/api/upload', {
    method: 'POST',
    body: formData,
  });
};

2. Big forms with lots of fields

Avoid managing 10+ fields with useState
Just collect all values from the form at once

const UncontrolledInputs = () => {
  const [value, setValue] = useState(0);

  const handleSubmit = (e) => {
    e.preventDefault();

    const formData = new FormData(e.currentTarget);
    const newUser = Object.fromEntries(formData);
    console.log(newUser);

    setValue(value + 1); // triggers re-render even though it's not shown in UI
    e.currentTarget.reset(); // clears input after submit
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" />
      <input name="email" placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  );
};

This approach is useful when:

• You don’t need live validation

• You're working with lots of fields

• You want to keep things simple and "uncontrolled"

3. Backend expects multipart/form-data

Some APIs require this format

const handleSubmit = async (e) => {
  e.preventDefault();
  const formData = new FormData();
  formData.append('title', 'My Post');
  formData.append('description', 'This is a test');

  await fetch('/api/posts', {
    method: 'POST',
    body: formData,
  });
};

⚠️ Use state when...

Small forms, text inputs
Need live validation or UI logic

const [email, setEmail] = useState('');
<input value={email} onChange={(e) => setEmail(e.target.value)} />

📌 Summary