React Events In Detail

Overview

We'll look at how we can use event data and event pooling.

Objectives

  1. Access event data
  2. Describe how event pooling works

Accessing event data

Let's take a deeper look at the actual event being passed through. A SyntheticEvent event has all of its usual properties and methods. These include its type, target, mouse coordinates, and so on. As a reminder, we add an event handler to a component, and then we can use the event's data like this:

export default class Clicker extends React.Component {

  handleClick = (event) => {
    console.log(event.type); // prints 'click'
  }

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

For example, if we wanted to get the target of an event, we'd use event.target. If we want to prevent a default action whenever an event happens, we call event.preventDefault(). This is all super similar to regular browser events and should feel very familiar!

Event pooling

Chilling in the pool

Since React has its own implementation for events (called SyntheticEvent), it allows us to take advantage of several techniques to increase the performance of our applications. One such technique is called 'event pooling'. It might sound complicated, but it's actually pretty simple.

Event pooling means that whenever an event fires, its event data (an object) is sent to the callback. The object is then immediately cleaned up for later use. This is what we mean by 'pooling': the event object is in effect being sent back to the pool for use in a later event. It's something that trips up a lot of people, and you might have run into it yourself when inspecting SyntheticEvent in the browser.

If we click the button of our Clicker component and then inspect the logged out object in our console, we notice that all properties are null again. By the time we inspect the object in our browser, the event object will have already been returned to the pool. This means that we can't access event data in an asynchronous manner by saving it in the state, or running a timeout and then accessing the event again.

You usually don't need to access your event data in an asynchronous manner like described above, but if you do, there are two options: you either store the data you need in a variable (e.g. const target = event.target), or we can make the event persistent by calling that method: event.persist().

Resources

View Events In Detail on Learn.co and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us