The SyntheticEvent Object

Learn how to tackle the problem of using callback functions outside of the event handler and force React to prevent resetting the event object to null.


React does not pass a native object to its event handlers but an object of type SyntheticEvent. Its primary purpose is to ensure cross-browser compatibility. If you ever feel an urge to access the original event though, React provides it to you via the object property nativeEvent.

But that is not the only way the SyntheticEvent object and native event object differ. The SyntheticEvent object is short-lived and nullified shortly after the event callback has been called (mainly for performance reasons). Accessing properties of the event object is not possible anymore once outside the original event handler.

What does that mean in detail? Let’s look at an example:

Get hands-on with 1200+ tech skills courses.