Why use such a wrapper?

We use different browsers where the same event has different names. Here wrapper does is triggering all the different names for the same event effect. Therefore, whenever we are triggering an event in a React JS, we are not trying to trigger the real DOM event, instead, we are using the React JS custom event type, which is the synthetic event.

Benefits of using synthetic events:

• Cross browsers applications are easy to implement.
• Synthetic events are that React JS reuses these events objects, by pooling them, which increase the performance.

In React JS, there are events by which users interact the with an application UI. React listens to events at the document level, after receiving events from the browser, React wraps these events with a wrapper that has a similar interface as the local browser event, which helps us to use methods like preventDefault().