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.

We'll cover the following

SyntheticEvent
Writing values into variables
Persisting SyntheticEvents with e.persist()

`SyntheticEvent`

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.

Introduction

Introduction to ES2015+

JSX – an Introduction

Rendering of Elements and Components in React

State and Lifecycle Methods

Event Handling

Forms

Lists, Fragments, and Conditional Rendering

CSS and Styling

Higher Order Components

Functions as a Child and Render Props

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Conclusion

Appendix

The SyntheticEvent Object

`SyntheticEvent`