Q1. What are synthetic events in React?
Synthetic events are React's cross-browser wrapper around the browser's native event. They have the same interface as native events but work consistently across all browsers. React reuses synthetic event objects for performance, pooling them.
Q2. Why does React use synthetic events?
To ensure consistent behavior across different browsers and to improve performance. Synthetic events normalize event properties, so developers don't have to worry about browser inconsistencies. Also, event pooling reduces memory usage.
Q3. What is event pooling in React?
React reuses synthetic event objects by pooling them. After the event handler is called, all properties on the synthetic event are nullified. If you need to access the event asynchronously (e.g., inside a setTimeout), you must call e.persist() to remove it from the pool.
Q4. How do you access native event from synthetic event?
You can access the native browser event via the nativeEvent property. Example: e.nativeEvent. However, you rarely need this because synthetic events already normalize properties.
Q5. Are synthetic events the same as native events?
They have the same interface, but synthetic events work identically across browsers, while native events may have differences. Synthetic events also have performance optimizations like pooling. In most cases, you can use them interchangeably.