What are React synthetic events?

Q: What are React synthetic events?

**Core concept (TL;DR).** A SyntheticEvent is React's **cross-browser wrapper** around the native DOM event. It gives every event a consistent API ( preventDefault , stopPropagation , target ) regardless of browser quirks, and you can always reach the underlying event via e.nativeEvent . A normalized wrapper over the native event native event <text x="110

1.2k views

Understand the problem

Explaining how React achieves cross-browser consistency for event handling.

eventsarchitecture

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Synthetic vs native event

export default function App() {
  const handle = (e) => {
    e.preventDefault();                       // works cross-browser
    console.log("synthetic type:", e.type);
    console.log("native type:", e.nativeEvent.type); // underlying DOM event
  };
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      <a href="https://example.com" onClick={handle}>
        Click (preventDefault stops navigation)
      </a>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are React Hooks? Name a few common ones.