What is a SyntheticEvent in React and how does event pooling work?

What is a SyntheticEvent in React and how does event pooling work?

• A. Synthetic events are a one-to-one mapping of DOM events with no normalization.
• B. React wraps native events in a SyntheticEvent to normalize across browsers; events are pooled and reused for performance, so their properties become null after the handler executes; call e.persist() to opt out.
• C. e.persist() has no effect on pooling.
• D. Synthetic events are only used in React Native.

Answer: (B)

In React, events are wrapped in aSyntheticEvent that normalizes differences across browsers, giving you a consistent set of properties like target, type, and currentTarget to work with. For performance, React reuses this event object through a pooling mechanism, so after the event handler finishes, the event’s properties are cleared (they become null). This is why you can safely read values inside the handler, but asynchronous code after the handler runs can’t rely on those properties unless you opt out. If you need to use the event later (for example in a setTimeout or a promise), call e.persist() to opt out of pooling, or copy the needed values out of the event inside the handler first. Note that this concept applies to web React; React Native uses a different event system.

In React, events are wrapped in aSyntheticEvent that normalizes differences across browsers, giving you a consistent set of properties like target, type, and currentTarget to work with. For performance, React reuses this event object through a pooling mechanism, so after the event handler finishes, the event’s properties are cleared (they become null). This is why you can safely read values inside the handler, but asynchronous code after the handler runs can’t rely on those properties unless you opt out. If you need to use the event later (for example in a setTimeout or a promise), call e.persist() to opt out of pooling, or copy the needed values out of the event inside the handler first. Note that this concept applies to web React; React Native uses a different event system.