mediumFrontend

How does React handle events?

Q: How does React handle events?

**Core concept (TL;DR).** You attach handlers in JSX with **camelCase** props ( onClick , onChange ) that take a **function**, not a string. Under the hood React uses **event delegation** — a single listener per event type at the root container — and dispatches a normalized **SyntheticEvent** to your handler. One root listener delegates to your handlers root: one "click" listener

958 views

Understand the problem

Explain React's synthetic event system and how it differs from native DOM events.

eventssynthetic eventsdom

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

Handlers, preventDefault, passing args

export default function App() {
  const onSubmit = (e) => { e.preventDefault(); console.log("submitted"); };
  const onPick = (id) => console.log("picked", id);

  return (
    <form onSubmit={onSubmit} style={{ padding: 24, fontFamily: "system-ui" }}>
      {/* pass a reference, not a call */}
      <button type="button" onClick={() => onPick(1)}>Pick #1</button>
      <button type="submit">Submit (preventDefault)</button>
    </form>
  );
}

Join the discussion

Discussion (0)

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

Explain the concept of 'composition' in React components.

How do you handle asynchronous operations in React functional components?