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.

Practice

1. What does event.preventDefault() do in a React event handler?

easy

A. Removes the event listener from the element

B. Stops the browser's default action for that event

C. Triggers the event again immediately

D. Logs the event details to the console

Solution

1. Step 1: Understand the purpose of preventDefault()

   This method stops the browser from performing its usual action, like submitting a form or following a link.

2. Step 2: Recognize what preventDefault() does not do

   It does not remove listeners, re-trigger events, or log anything automatically.

3. Final Answer:

   Stops the browser's default action for that event -> Option B

4. Quick Check:

   preventDefault() = Stops default browser action [OK]

Hint: Remember: preventDefault stops browser's automatic event action [OK]

Common Mistakes:

• Thinking preventDefault removes event listeners
• Assuming preventDefault triggers the event again
• Confusing preventDefault with logging or debugging

2. Which of the following is the correct way to prevent a form submission's default behavior in React?

easy

A. function handleSubmit() { event.preventDefault(); }

B. function handleSubmit(event) { preventDefault(); }

C. function handleSubmit(event) { event.preventDefault(); }

D. function handleSubmit() { preventDefault(event); }

Solution

1. Step 1: Check the event parameter usage

   The event object must be passed as a parameter to the handler to call preventDefault() on it.

2. Step 2: Verify the syntax of preventDefault call

   Calling event.preventDefault() inside the handler with event parameter is correct syntax.

3. Final Answer:

   function handleSubmit(event) { event.preventDefault(); } -> Option C

4. Quick Check:

   Correct syntax requires event parameter and event.preventDefault() [OK]

Hint: Always include event parameter to call event.preventDefault() [OK]

Common Mistakes:

• Not passing event parameter to the handler
• Calling preventDefault without event prefix
• Trying to call preventDefault without parentheses

3. What will be the output when clicking the link in this React component?

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

medium

A. Only the alert 'Link clicked!' appears, no navigation happens

B. The browser navigates to https://example.com and shows alert

C. Nothing happens on click

D. The link navigates without showing alert

Solution

1. Step 1: Understand event.preventDefault() effect on link

   Calling event.preventDefault() stops the browser from navigating to the href URL.

2. Step 2: Check what else happens on click

   The alert('Link clicked!') runs, so the alert appears on click.

3. Final Answer:

   Only the alert 'Link clicked!' appears, no navigation happens -> Option A

4. Quick Check:

   preventDefault stops navigation, alert still runs [OK]

Hint: preventDefault stops navigation but lets your code run [OK]

Common Mistakes:

• Expecting navigation to happen despite preventDefault
• Thinking alert won't show if preventDefault is called
• Confusing preventDefault with stopPropagation

4. Identify the error in this React event handler that tries to prevent form submission:

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

medium

A. The function should return false instead of calling preventDefault

B. Using console.log inside the handler is not allowed

C. preventDefault() should be called after console.log

D. Missing event parameter in the function definition

Solution

1. Step 1: Check function parameters

   The handler uses event.preventDefault() but does not receive event as a parameter, so event is undefined.

2. Step 2: Understand consequence of missing event

   This causes a runtime error because event is not defined in the function scope.

3. Final Answer:

   Missing event parameter in the function definition -> Option D

4. Quick Check:

   Event object must be passed to handler to call preventDefault [OK]

Hint: Always include event parameter to access event.preventDefault() [OK]

Common Mistakes:

• Forgetting to add event parameter
• Thinking preventDefault can be called globally
• Confusing preventDefault with returning false

5. You want to prevent a form from submitting only if a checkbox is unchecked. Which React event handler correctly implements this behavior?

function handleSubmit(event) {
  // Prevent submission only if checkbox is unchecked
  const checkbox = document.getElementById('agree');
  if (/* condition here */) {
    event.preventDefault();
    alert('You must agree first');
  }
}

hard

A. if (!checkbox.checked) { event.preventDefault(); alert('You must agree first'); }

B. if (checkbox.checked) { event.preventDefault(); alert('You must agree first'); }

C. if (checkbox.value === false) { event.preventDefault(); alert('You must agree first'); }

D. if (checkbox === null) { event.preventDefault(); alert('You must agree first'); }

Solution

1. Step 1: Check the checkbox condition for preventing submission

   You want to prevent submission if the checkbox is NOT checked, so condition is !checkbox.checked.

2. Step 2: Confirm preventDefault is called only when checkbox is unchecked

   Calling event.preventDefault() inside this condition stops submission correctly.

3. Final Answer:

   if (!checkbox.checked) { event.preventDefault(); alert('You must agree first'); } -> Option A

4. Quick Check:

   Prevent submission when checkbox is unchecked = !checkbox.checked [OK]

Hint: Use !checkbox.checked to detect unchecked state before preventDefault [OK]

Common Mistakes:

• Using checkbox.checked instead of !checkbox.checked
• Checking checkbox.value instead of checked property
• Checking if checkbox is null instead of its checked state