Synthetic Events (Live Playground)

React's Synthetic Events are a cross-browser wrapper around native browser events, providing a consistent interface for handling events across different browsers. In this tutorial, we'll explore React Synthetic Events, including how to access event properties and handle event pooling, with sample code and simple explanations.

Accessing Event Properties

React Synthetic Events have the same interface as native browser events, so you can access event properties like target, type, and currentTarget in the same way. Here's an example of accessing the event's target property:

JavaScript

class App extends React.Component {
  handleChange(event) {
    console.log('Input value:', event.target.value);
  }

  render() {
    return <input onChange={this.handleChange} />;
  }
}

In this example, we accessed the value property of the event's target in the handleChange method.

Live Playground, Try it Yourself

Event Pooling

React reuses Synthetic Event objects for better performance. This process, called event pooling, means that event objects are returned to a pool after the event callback has been invoked, and their properties are nullified. To work with the event properties asynchronously, you can call event.persist() to remove the event from the pool and prevent its properties from being nullified. Here's an example of using event.persist():

JavaScript

class App extends React.Component {
  handleChange(event) {
    event.persist();
    setTimeout(() => {
      console.log('Input value:', event.target.value);
    }, 1000);
  }

  render() {
    return <input onChange={this.handleChange} />;
  }
}

In this example, we called event.persist() to keep the event object available for the asynchronous setTimeout callback.

Live Playground, Try it Yourself

Handling Native Events

In some cases, you may need to access native browser events directly, such as when working with third-party libraries or custom event handling. You can access the native event using the nativeEvent property of the Synthetic Event. Here's an example of accessing the native event:

JavaScript

class App extends React.Component {
  handleClick(event) {
    console.log('Native event:', event.nativeEvent);
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

In this example, we accessed the native event using the nativeEvent property in the handleClick method.

Live Playground, Try it Yourself

Conclusion

React Synthetic Events provide a consistent and performant way to handle events across different browsers. By understanding how to access event properties and handle event pooling, you'll be better equipped to work with events in your React applications. With a solid grasp of React Synthetic Events, you'll be well on your way to becoming an effective React developer.