Call preventDefault() on the event object that React passes to your handler. The usual case is a form, where it stops the browser from submitting and reloading the page, so your code can handle the data instead.
function Form() {
const handleSubmit = (event) => {
event.preventDefault(); // Prevents form from submitting
console.log('Form submitted');
};
return (
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>
);
}
Returning false from the handler doesn't work in React the way it does in plain HTML. You must call preventDefault() explicitly. To stop the event from bubbling up to parent elements, call stopPropagation(), which is a different thing.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Saved in this browser - sign in to keep your review list.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Keep going - a few more words and AI can grade it.
Interview lens
How interviewers actually use this question
Likely follow-ups
What's the difference between preventDefault() and stopPropagation(), and when would you call both?preventDefault cancels the browser's own action. stopPropagation keeps parent handlers from seeing the event. Neither one does the other's job.
Returning false cancels the default in plain HTML. Why doesn't it work in a React handler?React ignores what the handler returns. The return-false trick belongs to inline HTML handlers, so in React you call preventDefault instead.
Once you've stopped the submit, how do you read the form's values?Controlled inputs already hold their values in state. For uncontrolled inputs, read them with new FormData(event.currentTarget).
What you can say
You call preventDefault() on the event object React passes into your handler, and that stops the browser from doing whatever it would do on its own.
The usual case is a form, because by default the browser submits it and reloads the page before your code gets a chance to handle the data.
So the first line of my onSubmit handler is event.preventDefault(), and after that I read the values and send them wherever they need to go.
A common slip is returning false from the handler, which works in plain HTML but does nothing in React, so you have to call preventDefault() yourself.
It's also separate from stopPropagation(), which stops the event from bubbling up to parent handlers but doesn't stop the browser's default action.
Weak answers to avoid
Returns false to cancel the submitReact ignores the handler's return value, so the page still reloads. Say that you call event.preventDefault() yourself, and that the HTML habit doesn't carry over.
Treats stopPropagation as the same thingstopPropagation only keeps the event from reaching parent handlers. The form still submits and the page reloads. Say what each one stops.
Calls preventDefault after an awaitBy then the event has finished dispatching and the browser has already started the submit. Call it first, synchronously, then start the async work.
Names the method but not the problem it solvesSaying 'call preventDefault' without the form-reload case sounds memorized. Say what the browser does by default and why your handler has to stop it.
Interview lens
Likely follow-ups, what you can say, and the weak answers to avoid.
