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.