Synthetic events in React - Step-by-Step Execution

Concept Flow - Synthetic events

User interacts with element

↓

React creates SyntheticEvent

↓

SyntheticEvent passed to event handler

↓

Handler reads event properties

↓

React manages event pooling

↓

Event handler finishes

↓

SyntheticEvent released back to pool

When a user interacts, React creates a SyntheticEvent that wraps the native event, passes it to your handler, then reuses it for performance.

Execution Sample

React

function Button() {
  function handleClick(event) {
    console.log(event.type);
  }
  return <button onClick={handleClick}>Click me</button>;
}

This React button logs the event type when clicked using a SyntheticEvent.

Execution Table

Step	Action	SyntheticEvent Properties	Handler Output	Event Pool Status
1	User clicks button	type: 'click', target: button element	none yet	Event created and active
2	React creates SyntheticEvent	type: 'click', target: button element	none yet	Event active
3	SyntheticEvent passed to handleClick	type: 'click', target: button element	none yet	Event active
4	handleClick reads event.type	type: 'click', target: button element	Logs 'click'	Event active
5	handleClick finishes	type: 'click', target: button element	Logged 'click'	Event active
6	React releases SyntheticEvent back to pool	properties cleared	none	Event returned to pool

💡 Event handler finished and SyntheticEvent returned to pool for reuse

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6
SyntheticEvent	null	{type: 'click', target: button}	{type: 'click', target: button}	null (pooled)
event.type	undefined	'click'	'click'	undefined (cleared)

Key Moments - 2 Insights

Why can't we use the SyntheticEvent asynchronously after the handler finishes?

Because React reuses SyntheticEvent objects by clearing their properties after the handler (see execution_table step 6), so accessing them later gives undefined.

Is SyntheticEvent the same as the native browser event?

No, SyntheticEvent is a React wrapper that normalizes events across browsers but contains the native event inside it (see execution_table step 2).

Visual Quiz - 3 Questions

Look at the execution_table at step 4, what is the value of event.type inside the handler?

A 'button'

B 'click'

C undefined

D null

💡 Hint

Check the 'SyntheticEvent Properties' and 'Handler Output' columns at step 4 in execution_table.

At which step does React release the SyntheticEvent back to the pool?

A Step 6

B Step 5

C Step 3

D Step 2

💡 Hint

Look at the 'Event Pool Status' column in execution_table for when the event is returned.

If you try to access event.type asynchronously after the handler, what happens?

A It throws an error

B It still shows 'click'

C It shows undefined because the event is cleared

D It shows the native event type

💡 Hint

Refer to variable_tracker for event.type after step 6 and key_moments explanation.

Concept Snapshot

React SyntheticEvent wraps native events for cross-browser consistency.
It is passed to event handlers with normalized properties.
After the handler runs, React clears and reuses the event object.
Do not access SyntheticEvent asynchronously without calling event.persist().
Use event.type, event.target inside the handler to get event info.

Full Transcript

When a user clicks a React element, React creates a SyntheticEvent object that wraps the native browser event. This SyntheticEvent is passed to your event handler function. Inside the handler, you can read properties like event.type and event.target normally. After the handler finishes, React clears the SyntheticEvent's properties and returns it to a pool for reuse to improve performance. This means you cannot use the SyntheticEvent asynchronously after the handler unless you call event.persist() to keep it. This process ensures consistent event behavior across browsers and efficient memory use.

Practice

1. What is the main purpose of React's SyntheticEvent?

easy

A. To provide a consistent event interface across different browsers

B. To replace native DOM events with custom events

C. To speed up event handling by skipping the event queue

D. To allow events only on class components

Solution

1. Step 1: Understand SyntheticEvent role

   React's SyntheticEvent wraps native browser events to normalize differences across browsers.

2. Step 2: Compare options

   To provide a consistent event interface across different browsers correctly states the purpose. Options A, C, and D are incorrect because SyntheticEvent does not replace native events, does not skip event queues, and works with functional components too.

3. Final Answer:

   To provide a consistent event interface across different browsers -> Option A

4. Quick Check:

   SyntheticEvent = consistent cross-browser event [OK]

Hint: SyntheticEvent normalizes events across browsers [OK]

Common Mistakes:

• Thinking SyntheticEvent replaces native events
• Believing SyntheticEvent only works with class components
• Assuming SyntheticEvent speeds up event handling

2. Which of the following is the correct way to attach a click event handler in React using Synthetic events?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Recall React event naming conventions

   React uses camelCase for event handlers, so the correct attribute is onClick.

2. Step 2: Check each option

   <button onClick={handleClick}>Click me</button> uses onClick correctly. <button onclick={handleClick}>Click me</button> uses lowercase onclick which is invalid in JSX. <button OnClick={handleClick}>Click me</button> has incorrect capitalization. <button on-click={handleClick}>Click me</button> uses hyphen which is invalid.

3. Final Answer:

   <button onClick={handleClick}>Click me</button> -> Option C

4. Quick Check:

   React event handlers use camelCase like onClick [OK]

Hint: React events use camelCase like onClick [OK]

Common Mistakes:

• Using lowercase event names like onclick
• Using hyphens in event names
• Incorrect capitalization like OnClick

3. Consider this React code snippet:

function MyButton() {
  function handleClick(event) {
    alert(event.type);
  }
  return <button onClick={handleClick}>Click me</button>;
}

What will be alerted when the button is clicked?

medium

A. undefined

B. click

C. onClick

D. Click

Solution

1. Step 1: Understand event.type in SyntheticEvent

   The event.type property contains the type of the event, which for a click event is the string "click" in lowercase.

2. Step 2: Analyze the alert output

   When the button is clicked, handleClick is called and alerts event.type, so it shows "click".

3. Final Answer:

   click -> Option B

4. Quick Check:

   event.type for click event = "click" [OK]

Hint: event.type is lowercase event name like 'click' [OK]

Common Mistakes:

• Assuming event.type is capitalized
• Confusing event handler name with event.type
• Expecting undefined if event not passed

4. Identify the error in this React event handler code:

function Form() {
  function handleSubmit(event) {
    event.preventdefault();
    console.log('Submitted');
  }
  return <form onSubmit={handleSubmit}><button type="submit">Send</button></form>;
}

medium

A. Missing return statement in handleSubmit

B. The event handler should be named onsubmit, not onSubmit

C. The button type should be button, not submit

D. event.preventdefault() should be event.preventDefault() with capital D

Solution

1. Step 1: Check event method spelling

   The method to stop form submission is event.preventDefault() with a capital D. The code uses lowercase 'd', which causes an error.

2. Step 2: Verify other parts

   The event handler should be named onsubmit, not onSubmit is wrong because React uses camelCase onSubmit. The button type should be button, not submit is incorrect because submit button type is correct. Missing return statement in handleSubmit is irrelevant since no return needed in handler.

3. Final Answer:

   event.preventdefault() should be event.preventDefault() with capital D -> Option D

4. Quick Check:

   Method names are case-sensitive: preventDefault() [OK]

Hint: JavaScript method names are case-sensitive [OK]

Common Mistakes:

• Using lowercase preventdefault() instead of preventDefault()
• Confusing onSubmit with onsubmit
• Changing button type unnecessarily

5. You want to handle a keyboard event in React and only respond when the Enter key is pressed. Which is the best way to do this using Synthetic events?

function Input() {
  function handleKeyDown(event) {
    // What condition should go here?
  }
  return <input onKeyDown={handleKeyDown} />;
}

hard

A. if (event.key === 'Enter') { /* handle Enter */ }

B. if (event.code === 13) { /* handle Enter */ }

C. if (event.keyCode === 13) { /* handle Enter */ }

D. if (event.keyName === 'Enter') { /* handle Enter */ }

Solution

1. Step 1: Understand SyntheticEvent keyboard properties

   React SyntheticEvent supports event.key which returns the key name as a string, e.g., 'Enter'. This is preferred over deprecated keyCode.

2. Step 2: Evaluate options

   if (event.key === 'Enter') { /* handle Enter */ } uses event.key === 'Enter' which is modern and recommended. if (event.keyCode === 13) { /* handle Enter */ } uses keyCode which is deprecated. Options A, B, and D use deprecated or invalid properties.

3. Final Answer:

   if (event.key === 'Enter') { /* handle Enter */ } -> Option A

4. Quick Check:

   Use event.key === 'Enter' for keyboard checks [OK]

Hint: Use event.key with string names, not keyCode [OK]

Common Mistakes:

• Using deprecated event.keyCode
• Using invalid event.code or event.keyName
• Comparing keyCode to string instead of number