✅ What are Synthetic Events in React?

In React, a Synthetic Event is a wrapper around the browser’s native event system. Instead of directly working with addEventListener or raw DOM events, React provides a cross-browser consistent event object called SyntheticEvent. This abstraction makes event handling faster, cleaner, and easier to maintain.

🚀 Why Does React Use Synthetic Events?

Cross-browser compatibility – Normalizes differences between Chrome, Firefox, Safari, etc.
Performance optimization – Uses event delegation (attaching a single listener at the root instead of each DOM node).
Consistent API – Same event object across all browsers.
Event pooling (before React 17) – Reduced memory usage by reusing event objects.

🧩 Example: Basic Synthetic Event

import React from "react";

function ButtonClick() {
  function handleClick(event) {
    console.log("Synthetic Event:", event);
    console.log("Event type:", event.type); // "click"
    console.log("Target element:", event.target);
  }

  return ;
}

export default ButtonClick;

Here, event is a SyntheticEvent, ensuring the same behavior across all browsers.

📌 Key Properties of SyntheticEvent

Property	Description
`event.type`	Type of event (e.g., click, change).
`event.target`	The element that triggered the event.
`event.currentTarget`	The element where the event handler is attached.
`event.preventDefault()`	Prevents default browser behavior (e.g., page reload on form submit).
`event.stopPropagation()`	Stops the event from bubbling up the DOM.

♻️ Event Pooling (Before React 17)

In older versions of React (< 17), Synthetic Events were pooled for performance. This meant once the callback finished, the event object was cleared. To use the event asynchronously, you had to call event.persist().

function InputChange() {
  function handleChange(event) {
    event.persist(); // keep event for async use
    setTimeout(() => {
      console.log("Event value:", event.target.value);
    }, 1000);
  }

  return ;
}

👉 From React 17 onwards, event pooling was removed, so persist() is no longer needed.

⚙️ How React Handles Events Internally

React attaches a single event listener at the root of the DOM (not every element).
When an event occurs, React catches it and creates a SyntheticEvent.
The corresponding event handler inside your component is executed.
Event bubbling and capturing phases are simulated consistently across browsers.

This is called event delegation, and it significantly improves performance in large apps.

🔧 Real-world Example: Form Handling

import React, { useState } from "react";

function FormExample() {
  const [name, setName] = useState("");

  function handleSubmit(event) {
    event.preventDefault();
    alert(`Submitted Name: ${name}`);
  }

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
      
      
  );
}

export default FormExample;

Here, onSubmit uses a SyntheticEvent to prevent page reload, and onChange gives consistent access to the input value across all browsers.

🧾 Conclusion

Synthetic Events in React simplify and standardize event handling by providing a consistent, performant, and cross-browser API. With event delegation, React ensures fewer memory leaks and better performance. While older React versions used event pooling, React 17+ made event handling even simpler by removing it. Mastering Synthetic Events is key to building robust, user-friendly, and scalable React applications.

What are Synthetic Events in React? Complete Guide with Examples