How one can Add/Take away an Occasion Listener in React

Introduction

If you happen to’ve been working with React, you’ll know that it is a highly effective JavaScript library for constructing person interfaces. However generally, it’s essential transcend the fundamental click on and alter occasions. That is the place occasion listeners come into play. This Byte is good for builders who’re aware of React and wish to dive deeper into how occasion listeners work and tips on how to handle them successfully.

Occasion Listeners in React

Earlier than we get going, it is necessary to know what occasion listeners are. In JavaScript, occasion listeners are features which can be known as when a specified occasion happens. These occasions may very well be something from clicking a button, urgent a key, to resizing a window.

React, being a JavaScript library, additionally makes use of occasion listeners to deal with person interactions. Nevertheless, not like vanilla JavaScript, React wraps the native occasion right into a SyntheticEvent. This gives a cross-browser interface to the native occasion, making certain that the occasion behaves constantly throughout all browsers.

This is a easy instance of an occasion listener in React:

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <button onClick={handleClick}>
      Click on Me
    </button>
  );
};

On this instance, handleClick is an occasion listener that logs “Button clicked!” to the console when the button is clicked. That is, successfully, an occasion listener on the <button> element.

Why Add/Take away an Occasion Listener?

So why cannot we simply depart the occasion listener hooked up?

Properly, the reason being twofold. First, including and eradicating occasion listeners as wanted can considerably enhance the efficiency of your software. Occasion listeners may be fairly costly when it comes to reminiscence and processing energy, particularly you probably have lots of them.

Second, eradicating occasion listeners after they’re now not wanted might help stop reminiscence leaks. A reminiscence leak can occur when an software continues to make use of reminiscence that it now not wants. Over time, these leaks may cause your software to decelerate and even crash.

How one can Add/Take away an Occasion Listener

Now that we’ve got a little bit of background on managing occasion listeners, let’s examine tips on how to add and take away them in React.

Including an Occasion Listener

So as to add an occasion listener, you merely must specify the occasion and the operate to name when the occasion happens. That is usually carried out within the render methodology of your element, like this:

const MyForm = () => {
  handleSubmit = () => {
    console.log('Kind submitted!');
  }

  render() {
    return (
      <type onSubmit={handleSubmit}>
        <button kind="submit">Submit</button>
      </type>
    );
  }
}

Right here, we’re including an occasion listener for the submit occasion. The handleSubmit operate might be known as each time the button is clicked.

Eradicating an Occasion Listener

On this part we’ll be including/eradicating occasion listeners a bit otherwise in an effort to higher illustrate the purpose and different methods to do that.

On this element, we add an occasion listener with addEventListener when it is mounted utilizing useEffect. Because the lifecycle of the element progresses and it’s being unmounted, we are able to then take away the occasion listener by returning a operate from useEffect that handles the elimination with removeEventListener.

import React, { useEffect } from 'react';

const MyComponent = () => {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  useEffect(() => {
    // Equal to componentDidMount
    doc.addEventListener('click on', handleClick);

    // Equal to componentWillUnmount
    return () => {
      doc.removeEventListener('click on', handleClick);
    };
  }, []);

  return (
    <button>
      Click on Me
    </button>
  );
};

Whereas this is not essentially the beneficial method so as to add click on handlers to a element, it does present a bit extra of how the lifecycle works for a element and the way we would use that lifecycle so as to add or take away our listeners.

Word: It is necessary to make sure that the operate handed to removeEventListener is identical operate that was handed to addEventListener. If you happen to go a distinct operate, the occasion listener won’t be eliminated.

Potential Points and Their Options

Whereas working with occasion listeners in React, you may encounter some widespread points. Let’s go over a couple of and talk about tips on how to clear up them.

1. this is undefined: This concern is because of JavaScript’s guidelines round this. In JavaScript, this inside an occasion handler refers back to the goal of the occasion, not the occasion of the category, which journeys up lots of builders. To repair this, it’s essential bind this to the occasion handler. This may be carried out within the constructor:

class MyButton extends React.Element {
  constructor(props) {
    tremendous(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert('Button has been clicked!');
  }

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

2. Occasion listener not eliminated: If you happen to overlook to take away an occasion listener, it could result in reminiscence leaks and errors. At all times bear in mind to take away international occasion listeners within the useEffect lifecycle methodology, or componentWillUnmount for old-style parts.

3. Occasion listener added a number of instances: If an occasion listener is added each time a element updates, it could result in surprising habits. To stop this, add occasion listeners within the useEffect methodology with no state variables, or in componentDidMount for previous parts. These are solely known as as soon as, when the element is first added to the DOM.

Utilizing useEffect Hook for Occasion Listener Administration

Let’s take one other fast have a look at the useEffect hook, which is a robust software that permits us to handle uncomfortable side effects in our parts. Unwanted effects may be something that interacts with the skin of the element, like fetching information, timers, and naturally, occasion listeners.

So as to add an occasion listener utilizing useEffect, we first declare the operate that might be known as when the occasion happens. Then, inside useEffect, we add the occasion listener, and return a cleanup operate that removes the occasion listener. That is the way it seems to be in code:

import React, { useEffect } from 'react';

operate MyComponent() {
  useEffect(() => {
    operate handleResize() {
      console.log(window.innerWidth);
    }

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div>Resize the window and examine the console!</div>;
}

On this code, handleResize logs the window’s interior width each time the window is resized. The occasion listener is added when the element mounts, and eliminated when it unmounts, because of useEffect‘s cleanup operate.

Use Circumstances for Including/Eradicating Occasion Listeners

There are tons of situations the place you may want so as to add or take away occasion listeners in a React software. For instance, you may wish to add a “click on” occasion listener to a button to set off a particular motion when the person interacts with it. Or, you may wish to take heed to the “resize” occasion on the window object to dynamically alter the structure of your software based mostly on the viewport measurement.

One other widespread use case is listening to keyboard occasions. For instance, you may wish to seize the “keydown” occasion to implement keyboard shortcuts in your software. This is a easy instance alongside these traces:

import React, { useEffect } from 'react';

operate MyComponent() {
  useEffect(() => {
    operate handleKeyDown(occasion) {
      if (occasion.key === 'Enter') {
        console.log('Enter key pressed!');
      }
    }

    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return <div>Press the Enter key and examine the console!</div>;
}

Right here we have added an occasion listener for the “keydown” occasion. When the person presses the Enter key, a message is logged to the console.

Conclusion

On this Byte, we have explored tips on how to add and take away occasion listeners in a React software. We have realized that React’s useEffect hook is a robust software for managing occasion listeners, permitting us so as to add them when a element mounts and take away them when it unmounts. We have additionally checked out some widespread use instances for including and eradicating occasion listeners, corresponding to responding to person interplay or adjustments within the viewport measurement.