What are synthetic event in React?

In React, SyntheticEvent is a wrapper for native browser events, primarily designed to ensure consistent event handling across different browsers, thereby resolving cross-browser compatibility issues. React's SyntheticEvent system guarantees that event handlers bound to components operate consistently across all browsers.

SyntheticEvent provides the same interface as native browser events, including methods such as preventDefault and stopPropagation, and it is cross-browser compatible. React internally implements its own event delegation mechanism, binding all events to the topmost level of the component, which minimizes the number of event handlers on the real DOM, thereby enhancing performance.

For instance, when binding a click event to each item in a list, React does not attach event handlers directly to each item but instead attaches a single handler to the topmost level of the list. It then identifies the specific item based on the event target and bubbling mechanism—this technique is called event delegation.

jsx
function App() {
  function handleClick(event) {
    event.preventDefault();
    console.log('Clicked element:', event.target);
    console.log('Event type:', event.type);
  }

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

In this example, we define a handleClick function that executes when the button is clicked. Here, we use event.preventDefault() to prevent the button's default behavior (e.g., submitting a form), while logging the clicked element and event type. Although event is a SyntheticEvent, it can be used just like a native event.

In summary, SyntheticEvent in React not only enhances cross-browser consistency but also improves application performance through event delegation.