What is Synthetic Event in React: Simple Explanation and Example

In React, a synthetic event is a wrapper around the browser's native event that works the same across all browsers. It provides a consistent interface to handle events like clicks or key presses in React components.

How It Works

Think of a synthetic event as a friendly translator between your React app and the browser's native events. Different browsers might send event information in slightly different ways, like people speaking different dialects. React’s synthetic event standardizes these differences so your code can understand events the same way everywhere.

When you interact with a React component, such as clicking a button, React creates a synthetic event object that mimics the native event but adds some helpful features. This synthetic event is reused and pooled internally for performance, so it behaves a bit differently than normal browser events.

Example

This example shows a button click handled by a synthetic event in React. The event object passed to the handler is a synthetic event.

jsx

import React from 'react';

function ClickButton() {
  function handleClick(event) {
    alert('Button clicked! Event type: ' + event.type);
  }

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

export default ClickButton;

Output

A button labeled 'Click me' appears. When clicked, an alert shows: 'Button clicked! Event type: click'.

When to Use

You use synthetic events automatically whenever you add event handlers in React, like onClick, onChange, or onSubmit. They help you write code that works the same in all browsers without extra effort.

For example, when building forms or interactive UI elements, synthetic events let you respond to user actions reliably. They also improve performance by reusing event objects internally.

Key Points

• Synthetic events wrap native browser events for consistency.
• They work the same across all browsers.
• React reuses synthetic event objects for better performance.
• You get synthetic events automatically when using React event handlers.

Key Takeaways

Synthetic events provide a consistent way to handle events across browsers in React.

React automatically uses synthetic events when you add event handlers like onClick.

Synthetic events improve performance by reusing event objects internally.

You can access event properties like type, target, and preventDefault on synthetic events.

Synthetic events behave like native events but with added cross-browser support.