How to Stop a React Form From Reloading the Page

Why the page reloads

A <form> submit fires two things in order: the browser's default action (navigate to the action URL, or the current URL if none is set, encoding the inputs as a query string) and then any JavaScript onSubmit handler. The browser navigation happens first - it reloads the page, React re-mounts with fresh state, and the items or input values you set in the handler are gone.

This is why you see the URL flash a ?item=Milk query string right before the list empties: that's the browser doing a GET to the same route.

The fix: call e.preventDefault()

In your submit handler, call e.preventDefault() as the very first thing. It cancels the browser navigation so only your JavaScript runs.

import { useState } from 'react';

export default function App() {
  const [items, setItems] = useState<string[]>([]);
  const [text, setText] = useState('');

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();                    // cancel the browser navigation
    setItems((prev) => [...prev, text]);   // update React state
    setText('');                           // clear the input
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Add an item..."
      />
      <button type="submit">Add</button>
      <ul>
        {items.map((it, i) => <li key={i}>{it}</li>)}
      </ul>
    </form>
  );
}

The e argument is a React.FormEvent (a synthetic event wrapping the native browser event). preventDefault() exists on every event type - React.FormEvent, React.MouseEvent, React.KeyboardEvent - so the same pattern applies wherever you need to stop the browser's default behavior.

What the browser default actually does

Without preventDefault():

1. Browser serializes the form fields: ?item=Milk
2. Browser navigates to http://localhost:5173/?item=Milk
3. React unmounts and re-mounts - all state resets to initial values
4. Your setItems(...) call either never runs or runs against the now-reset state on the previous mount

With preventDefault(), step 1-3 never happen, and only your handler runs.

When preventDefault is not enough

• Button outside the form - if the submit <button> sits outside the <form> tag, onSubmit may never fire. Keep the button inside, or give it form="form-id" and add id="form-id" to the form element.
• Missing type="submit" - a <button> without an explicit type defaults to type="submit" inside a form, which is usually what you want. A button with type="button" does nothing on its own.
• Form libraries - React Hook Form, Formik, and similar libraries call preventDefault() internally, but you still need to understand what they're suppressing when behavior is unexpected.