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.

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