I thought my React form was broken… until I understood e.preventDefault()

I was building a simple React form.

Nothing fancy.

Just this:

<form onSubmit={onSubmit}>
    <input value={userName} name="userName"/>
    <button type="submit">Add User</button>
</form>

I typed a name, clicked “Add User”…

And something weird happened.

👉 The page refreshed
👉 My input state disappeared
👉 My list reset

It felt like React was broken.

But React wasn’t the problem.

🧠 The real problem: I didn’t understand forms

I assumed a form in React behaves like a React component.

It doesn’t.

A <form> is still plain HTML.

And HTML has its own default behavior.

⚡ What actually happens when you submit a form?

By default:

Click Submit

↓

Browser submits form

↓

Page refresh

↓

React app resets

That’s it.

No React magic.

Just the browser doing what it was designed to do.

💥 So why does e.preventDefault() fix everything?

This line changed everything for me:

const onSubmit = (e) => { e.preventDefault(); }

What it really means is:

“Hey browser, don’t do your default thing. I’ll handle this myself.”

So now the flow becomes:

Click Submit
↓
React handles event
↓
No page reload
↓
State remains intact

That’s when it clicked for me:

👉 React didn’t break
👉 The browser just did what it always does
👉 I needed to take control

I used e.preventDefault() because forms naturally reload the page in the browser, and in React apps we need to stop that default behavior so we can fully control the UI using state.

const onSubmit=(e)=>{
    e.preventDefault();
    setUserName(userName)
}

🤯 Then I had a bigger question

If forms cause page refresh…

👉 Why do we even use forms in React?

Why not just this?

<input />
<button onClick={handleSubmit}>Add</button>

Turns out… that’s a trap.

🧩 Why forms still exist in React

React doesn’t replace HTML.

It enhances it.

Forms give us things we don’t want to rebuild manually.

1. Enter key works automatically

With a form:

<form onSubmit={handleSubmit}>

You automatically get:

• Enter submits form

• Button type="submit" works

• No extra event handling needed

Without forms:

onKeyDown={(e) => { if (e.key === "Enter") handleSubmit(); }}

👉 You just recreated form behavior manually.

2. Better semantics (real meaning)

This:

<form>

tells the browser:

“This is a single unit of input that will be submitted together.”

This helps:

• screen readers

• accessibility tools

• browser understanding of structure

3. Built-in browser features

Forms unlock things automatically:

• autofill (email, name, address)

• validation (required, minLength)

• password managers

• input suggestions

Without forms, you lose a lot of this.

4. They scale better in real apps

Think ahead:

Today:

1 input → add user

Tomorrow:

name
email
password
age
role
preferences

A form handles this cleanly:

<form onSubmit={handleSubmit}>

Without forms → chaos of buttons and handlers.

5. Why forms “feel broken” in React

Because of one thing:

Forms reload the page by default

But React apps are:

Single Page Applications (SPA)

We don’t want reloads.

We want state-driven UI.

So we do this:

e.preventDefault();

We are not avoiding forms.

We are disabling only their default behavior.

⚖️ When to use forms vs not

Use input + button when:

• tiny UI interaction

• toggle buttons

• no submission logic

• no Enter key requirement

Use forms when:

• login/signup

• adding items

• search bars

• structured input flows

• anything that “submits data”

🧠 Final mental model

This is what I wish I knew earlier:

Forms are NOT about page refresh.

They are about:

grouping inputs into a single submission unit.

And React’s job is not to replace that.

It is to control what happens after submission.

💡 Final takeaway

I didn’t just learn e.preventDefault().

I learned something deeper:

The browser already has behavior. React doesn’t replace it — it takes control of it.

And that changed how I think about frontend development.