Synthetic Events in React
- Basic knowledge of the Reactjs library.
An event is an action that occurs in the web browser, which the web browser feedbacks to you so that you can respond to it.
For example, a user clicks a button on a webpage, you may want to respond to this
click event by displaying an
Synthetic products are made from chemicals or artificial substances rather than from natural ones. collinsdictionary.com
From the definition above, you can tell that anything branded as 'synthetic' is not the original form rather it is in artificial form.
Synthetic events in React
React implements a synthetic events system by listening to every event at the document level, and when it receives an event, it wraps the event with an interface similar to the native browser event.
Using a real-life example, imagine you set an alarm to wake you up by 6:00 am and exactly 6:00 am, your alarm rings and you respond to the sound of the alarm tone by waking up. In this illustration, the
event is the sound of your alarm tone and the
response to this
event is you waking up.
When writing react code and you create an event handler for a particular event e.g a
click event, React listens for that
click event and when that
click event occurs, React wraps the
click event with an interface that's similar to your browser's original/native
click event interface.
Why Does React wrap Events?
Back to our alarm event illustration, let's refer to the event as the
ring event. Imagine a situation where this
ring event has different names on different browsers, then we will need to write different lines of code to create an implementation of this event for different browsers.
The wrapper React uses to wrap the event registers all the different names of this
ring event with only one name for instance
onRing. So, instead of listening to our
ring effect with a different name for Chrome, Firefox, Opera, or Safari, we just use one name
onRing, which is the wrapper react creates for the native event.
Thus, React solves this cross-browser compatibility issue by wrapping the event, thereby normalizing the 'event' object into something that works identically across browsers.
Knowledge of React's use of synthetic events explains why React uses
onSubmit, etc instead of the browser's native
onsubmit. As a matter of fact, if you use the browser's native event e.g
onclick to wrap an event handler, React will throw an error.
Warning: Invalid event handler property
onclick. Did you mean
Let's create a
click event and inspect the event object.
When the button is clicked, the event object is logged in the console.
onClick event object in the console, you can see the
nativeEvent object is wrapped within the
onClick event object and if you click on the
nativeEvent object to inspect it, you'll notice the similarity between the
nativeEvent object and the
onClick event object. This similarity throws more light on the above explanation that says React wraps the event with an interface that's similar to the interface of the browser's native event.
React implements a synthetic events system to maintain consistency and high performance to React apps and interfaces across different browsers without having to worry about cross-browser compatibility.