02 / 05

What are syntheticEvent?

Difficulty: 5/10
event pooling, event delegation, performance

All event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

Scenario Questions

0-2 years experience

  1. 1If you add an onClick handler to a button, what kind of object do you receive in the handler and how do you prevent its default action?
  2. 2What happens if you try to read event.target inside a setTimeout without calling event.persist()? Why?
  3. 3Show me how you would log the current value of an input field using the event object in an onChange handler.

2-5 years experience

  1. 1You notice that after an async API call, event.target is undefined in a click handler. Walk me through how you'd debug this and what React feature might be responsible.
  2. 2Explain why you might need to call event.persist() when using a debounced function that relies on the event.
  3. 3If you need to stop propagation of a React synthetic event but still let the native event bubble, how would you accomplish that?

5-8 years experience

  1. 1Our drag‑and‑drop component generates many events per second. What trade‑offs does React's event pooling introduce, and how would you optimise the component for performance?
  2. 2We need to integrate a third‑party library that expects native DOM events. How would you bridge between React's synthetic events and that library without breaking React's event system?
  3. 3A component currently calls event.persist() on every handler. How would you refactor it to reduce memory overhead while keeping the needed functionality?

8+ years experience

  1. 1We're migrating several teams from React 16 to React 18 and want to remove reliance on synthetic event pooling for future scalability. What architectural changes would you propose and how would you coordinate the migration?
  2. 2Design a shared event‑handling abstraction that works across React, Vue, and plain‑JS apps in our monorepo. How would you handle the differences between synthetic and native events, and what trade‑offs would you consider?
  3. 3If you were tasked with building a custom event system to replace React's synthetic events for better telemetry in a large enterprise app, what key design decisions and cross‑team impacts would you need to address?

Follow-up Questions

  • How does a SyntheticEvent differ from a native DOM event?
  • When would you deliberately avoid using React's synthetic event system?
  • What impact does event pooling have on memory usage?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.