Synthetic events in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Synthetic Event in React?

A Synthetic Event is a wrapper around the browser's native event. It works the same across all browsers, making event handling consistent and easier in React.

intermediate

How does React's Synthetic Event improve performance?

React uses a single event listener at the root and reuses Synthetic Event objects through event pooling, reducing memory use and improving speed.

beginner

How do you access the native event from a Synthetic Event?

You can access the native event using the property event.nativeEvent inside the Synthetic Event handler.

intermediate

Why should you call event.persist() in React Synthetic Events?

Calling event.persist() stops React from reusing the Synthetic Event object, allowing you to use the event asynchronously or after the event handler finishes.

intermediate

Which event phases does React's Synthetic Event system support?

React supports both the capturing and bubbling phases of events, allowing you to handle events at different stages in the event flow.

What does React's Synthetic Event system do?

A Replaces native events with custom events

B Wraps native events for cross-browser consistency

C Disables event bubbling

D Only works with mouse events

React's Synthetic Event wraps native events to provide a consistent interface across browsers.

How can you prevent React from reusing a Synthetic Event object?

A Call event.persist()

B Call event.stopPropagation()

C Call event.preventDefault()

D Call event.nativeEvent()

Calling event.persist() tells React not to reuse the Synthetic Event object.

Where does React attach its single event listener for Synthetic Events?

A At the root of the document

B On each individual element

C On the window object

D On the body element only

React attaches one event listener at the root to handle all Synthetic Events efficiently.

Which property gives access to the native event inside a Synthetic Event handler?

A event.realEvent

B event.originalEvent

C event.native

D event.nativeEvent

The native event is accessible via event.nativeEvent in React Synthetic Events.

Does React's Synthetic Event system support event capturing?

A No, only bubbling is supported

B No, only capturing is supported

C Yes, it supports capturing and bubbling

D No, it disables both phases

React supports both capturing and bubbling phases in its Synthetic Event system.

Explain what a Synthetic Event is in React and why it is useful.

Think about how React makes event handling easier and faster.

Describe how you can work with a Synthetic Event asynchronously in React.

Consider what happens if you want to use event data after the handler ends.