+ 3

Synthetic events in react

Could someone explain synthetic events in simple words? I have done some research on my part and was not able to understand it properly.

dom events react

18th Mar 2021, 5:23 PM

Avinesh

6 Answers

+ 4

Events indicate that something has occurred on a specific object. For example, clicking, moving a cursor, dragging, scrolling, hovering over an item, a key press, etc. Functions can be registered to be called when a specific event occurs on an object node or nodes. That function is known as an event handler, which includes code to do something when the event occurs. Often times, that involves updating the DOM or making an AJAX request. The problem with manipulating the DOM directly is it's really expensive to do when the DOM is quite large and updating on each change. When the DOM manipulation happens during events, it could result in a lot of updates to the DOM, which repaints the page after each DOM manipulation. ReactJS was created to make this DOM manipulation and page rendering much more efficient and smooth. It does this by avoiding DOM updates until all changes to be made have been applied to a copy of the DOM, known as the Virtual DOM. I'll talk more on Virtual DOM next...

19th Mar 2021, 7:17 AM

David Carroll

+ 4

The virtual DOM then compares itself with the previous state to identify the differences, then it will apply just those changes to the browser DOM in one shot. So... essentially... the code we write using ReactJS is against an abstraction of the browser's DOM. If we aren't working against the browser DOM with ReactJS, then we cannot work against the actual DOM events either. This is avoided by handling events against the virtual DOM, that simulate the events against the browser DOM. These simulated events might seem like the actual events in the browser. But, really, these are synthetic events, wrapping real events, to preserve the layer of abstraction against the real DOM. Hopefully, this explanation is somewhat helpful in understanding this better. 😉

19th Mar 2021, 7:24 AM

David Carroll

+ 4

Yep 👌 I wasn't sure what you already knew about events and the DOM... So... I provided more information about it all.

19th Mar 2021, 7:39 AM

David Carroll

+ 3

https://reactjs.org/docs/events.html If you already know the differences between Virtual DOM and the browser DOM, then the following analogy statement might help connect the dots... "Synthetic Events are to browser DOM Events as the Virtual DOM is to the browser DOM." - Me 😉 Otherwise, it helps to first understand the browser DOM and its associated events. Consider, a simple HTML document: ---- <html> ... <h1>Page Title</h1> ... </html> ---- The HTML will be loaded into the browser's memory as a hierarchical node tree of objects known as the browser's DOM (Document Object Model). The browser engine will initialize the page output rendered based on the initial state of each DOM node. Once loaded, the browser DOM can be modified in real time using Javascipt against the DOM API. The DOM API allows for traversing and updating node properties, changing the node structure, and handling events for each node. I'll talk about events next...

19th Mar 2021, 7:02 AM

David Carroll

+ 2

So can I say that the synthetic events are just wrappers to the real events in order to preserve them from affecting the browser DOM directly and are confined to the virtual DOM.

19th Mar 2021, 7:36 AM

Avinesh

+ 2

The first 2 were kind of revision and the final explanation answered the question and answered well. Thanks a lot David Carroll

19th Mar 2021, 7:42 AM

Avinesh