Preventing default behavior in React - Step-by-Step Execution

Concept Flow - Preventing default behavior

User triggers event

↓

React event handler called

↓

Check if event.preventDefault() is called?

Yes No↓

Default browser behavior prevented

↓

Custom React logic runs

↓

Component updates or stays same

When a user triggers an event, React calls the event handler. If event.preventDefault() is called, the browser's default action is stopped, letting React run custom code instead.

Execution Sample

React

function Link() {
  function handleClick(event) {
    event.preventDefault();
    alert('Link clicked but no navigation');
  }
  return <a href="https://example.com" onClick={handleClick}>Click me</a>;
}

This React component shows a link that, when clicked, does not navigate but shows an alert instead.

Execution Table

Step	Event Triggered	event.preventDefault() Called?	Browser Default Action	React Handler Action	Result
1	User clicks the link	Yes	Prevented (no navigation)	Alert shown: 'Link clicked but no navigation'	Link does not navigate, alert appears
2	User clicks the link	No	Navigation to https://example.com	No custom action	Browser navigates to example.com

💡 Execution stops after event handler finishes and browser either navigates or does not based on preventDefault call

Variable Tracker

Variable	Start	After Click
event.defaultPrevented	false	true (if preventDefault called) or false (if not)

Key Moments - 2 Insights

Why does the link not navigate when event.preventDefault() is called?

Because calling event.preventDefault() stops the browser's default navigation action, as shown in execution_table step 1 where navigation is prevented.

What happens if event.preventDefault() is not called in the handler?

The browser performs its default action, navigating to the link's href, as shown in execution_table step 2.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of event.defaultPrevented after the click if preventDefault is called?

A undefined

B false

C true

D null

💡 Hint

Check variable_tracker row for event.defaultPrevented after click

At which step in the execution_table does the browser navigate to the link URL?

A Step 2

B Step 1

C Neither step

D Both steps

💡 Hint

Look at Browser Default Action column in execution_table

If you remove event.preventDefault() from the handler, what changes in the execution_table?

A React handler action changes to show alert

B Browser default action changes from prevented to navigation

C Event is not triggered

D Nothing changes

💡 Hint

Compare Step 1 and Step 2 rows in execution_table

Concept Snapshot

React event handlers receive an event object.
Calling event.preventDefault() stops the browser's default action.
Use this to run custom code instead of default behavior.
Without preventDefault, browser acts normally.
Common for links, forms, and buttons.

Full Transcript

In React, when a user triggers an event like clicking a link, React calls the event handler function. Inside this handler, calling event.preventDefault() stops the browser from doing its usual action, such as navigating to a link. This lets React run custom code instead, like showing an alert. If preventDefault is not called, the browser performs its default behavior. This is useful to control what happens on user actions in React components.