Preventing default behavior in React - Performance & Optimization

Performance: Preventing default behavior

MEDIUM IMPACT

This affects interaction responsiveness and can reduce unnecessary page reloads or layout shifts caused by default browser actions.

Handling form submission without reloading the page

React

function handleSubmit(event) {
  event.preventDefault();
  console.log('Form submitted');
}

<form onSubmit={handleSubmit}>
  <button type="submit">Submit</button>
</form>

Prevents page reload, keeping the app state intact and improving interaction speed.

📈 Performance GainNon-blocking interaction, reduces input delay and prevents layout shifts

Handling form submission without reloading the page

React

function handleSubmit(event) {
  // No preventDefault called
  console.log('Form submitted');
}

<form onSubmit={handleSubmit}>
  <button type="submit">Submit</button>
</form>

The form submits normally causing a full page reload, blocking rendering and resetting state.

📉 Performance CostBlocks rendering for 100-300ms due to page reload, causes layout shift and input delay

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No preventDefault on form submit	Triggers full form submission and reload	Multiple reflows due to reload	High paint cost from full page repaint	[X] Bad
Using preventDefault on form submit	No extra DOM ops, stays client-side	Single reflow or none	Low paint cost, no reload	[OK] Good
No preventDefault on link click	Triggers navigation and reload	Multiple reflows and layout shifts	High paint cost from reload	[X] Bad
Using preventDefault on link click	No reload, SPA routing	Minimal reflows	Low paint cost	[OK] Good

Rendering Pipeline

Calling event.preventDefault() stops the browser from performing its default action, preventing layout recalculations and page reloads that block rendering.

→Event Handling

→Layout

→Paint

⚠️ BottleneckLayout

Core Web Vital Affected

INP

This affects interaction responsiveness and can reduce unnecessary page reloads or layout shifts caused by default browser actions.

Optimization Tips

1Always call event.preventDefault() to stop unwanted browser reloads or navigation.

2Prevent default actions early in event handlers to avoid layout recalculations.

3Use preventDefault to improve input responsiveness and avoid layout shifts.

Performance Quiz - 3 Questions

What is the main performance benefit of calling event.preventDefault() in a React event handler?

A It speeds up JavaScript execution by skipping event handlers.

B It prevents the browser from performing slow default actions like page reloads.

C It reduces the size of the JavaScript bundle.

D It automatically caches the page content.

DevTools: Performance

How to check: Record a user interaction like form submit or link click. Look for page reload or layout shifts in the flame chart.

What to look for: Presence of full page reload or large layout recalculations indicates missing preventDefault usage.