How can you prevent the default behavior of an event in React?

0-2 years experience

1. 1You have a simple form with a submit button that currently reloads the page. How would you stop the page refresh using React?
2. 2In a component you added an onClick handler to an <a href="/home"> link. What code would you write to ensure clicking the link doesn't navigate away?
3. 3If you forget to call e.preventDefault() in a form submit handler, what will the user experience?

2-5 years experience

1. 1We introduced a custom Button component that wraps a <button> and forwards onClick. Users report that pressing Enter in a text field still submits the form. Walk me through how you'd investigate and fix it.
2. 2During a refactor, a modal's close button stopped closing because the click event bubbles to a parent form and triggers submission. How would you modify the event handling to prevent the form submit while keeping other clicks functional?
3. 3Explain why calling e.preventDefault() inside an async function after awaiting a promise doesn't stop the original event.

5-8 years experience

1. 1Our app uses a high‑frequency scroll listener on a large list component. Some child items contain links that should navigate, but we also need to prevent default scrolling in certain cases. How would you structure the event handling to avoid unnecessary re‑renders and keep performance optimal?
2. 2We have a shared UI library with a Button component that conditionally calls preventDefault based on a prop. Discuss the trade‑offs of handling preventDefault inside the library versus leaving it to the consumer, especially regarding accessibility and testability.
3. 3During a migration from class components to hooks, we noticed that passing a SyntheticEvent to a debounced function loses the ability to call preventDefault. How would you redesign the code to reliably prevent the default behavior?

8+ years experience

1. 1Our product suite includes dozens of forms across multiple teams, each needing to prevent default submission in different ways. Propose a strategy for standardizing event handling across the codebase, considering TypeScript typings, lint rules, and developer experience.
2. 2We are evaluating moving from React's synthetic events to native events for performance reasons. What impact would that have on preventDefault usage, and how would you guide teams through the transition while maintaining backward compatibility?
3. 3Discuss how you would instrument and monitor misuse of preventDefault (e.g., forgetting to call it) in production, and what tooling or patterns you would introduce to catch such bugs early.