A biologist hand with a dropper on a small dish
Image src — https://royalsociety.org/topics-policy/projects/synthetic-biology/

SyntheticEvent in React — What is it?



Synthetic — In day to day life we use this word to give the idea that its not “organic”, it’s a manufactured object.

Similarly, React events are synthetic in nature, the reason being React wants to support cross-browser functionality.

For example — if React had been using onClick() event which is native to a X browser, this event may not behave exactly on another browser Y, and the Problem?

Problem is that if you are building an application, you would want it to behave seamlessly across different browsers and won’t like it to break on your favourite browser like I.E.

To prevents cross browser issues, React uses SyntheticEvent which is a wrapper build around native events and allows us to build elegant and beautiful web apps which works across different browsers.

React has put together a great documentation how it does that and what are the different SyntheticEvent(s) available to us, here is the link if you are interested to dive into SyntheticEvent https://reactjs.org/docs/events.html

That was my Day 7/100 of learning. I will see you in next chapter!