reactjs event listener beforeunload added but not removed

by

The removeEventListener should get the reference to the same callback that was assigned in addEventListener. Recreating the function won’t do. The solution is to create the callback elsewhere (onUnload in this example), and pass it as reference to both addEventListener and removeEventListener:

import React, { PropTypes, Component } from 'react';


class MyComponent extends Component {
    onUnload = e => { // the method that will be used for both add and remove event
       e.preventDefault();
       e.returnValue="";
    }

    componentDidMount() {
       window.addEventListener("beforeunload", this.onUnload);
    }

    componentWillUnmount() {
        window.removeEventListener("beforeunload", this.onUnload);
    }

    render() {
        return (
            <div>
                Some content
            </div>
        );
    }

}

export default MyComponent

React hooks

You can abstract the beforeunload event handling to a custom hook with the useRef, and useEffect hooks.

The custom hook useUnload receives a function (fn) and assigns it to the current ref. It calls useEffect once (on component mount), and sets the event handler to be an anonymous function that will call cb.current (if it’s defined), and returns a cleanup function to remove the event handler, when the component is removed.

import { useRef, useEffect } from 'react';

const useUnload = fn => {
  const cb = useRef(fn); // init with fn, so that type checkers won't assume that current might be undefined

  useEffect(() => {
    cb.current = fn;
  }, [fn]);

  useEffect(() => {
    const onUnload = (...args) => cb.current?.(...args);

    window.addEventListener("beforeunload", onUnload);

    return () => window.removeEventListener("beforeunload", onUnload);
  }, []);
};

export default useUnload;

Usage:

const MyComponent = () => {
  useUnload(e => {
    e.preventDefault();
    e.returnValue="";
  });

  return (
    <div>
      Some content
    </div>
  );
};

More Related Contents:

  1. Want to add “addEventListener” on multiple elements with same class [duplicate]
  2. Arrow function without curly braces
  3. Show or hide element in React
  4. How to set focus on an input field after rendering?
  5. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  6. react router v6 navigate outside of components
  7. Correct use of arrow functions in React
  8. React Native: require() with Dynamic String?
  9. Reactjs setState() with a dynamic key name?
  10. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  11. How can I update state.item[1] in state using setState?
  12. ReactJS – .JS vs .JSX
  13. TypeError: Cannot read property ‘setState’ of undefined
  14. JavaScript listener, “keypress” doesn’t detect backspace?
  15. Is this the correct way to delete an item using redux?
  16. Active link with React-Router?
  17. How can I render repeating React elements?
  18. Cleaner/shorter way to update nested state in Redux?
  19. How to make Puppeteer work with a ReactJS application on the client-side
  20. How to bind onclick handlers to `this` properly on React
  21. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  22. React-router: How to manually invoke Link?
  23. Module not found: Can’t resolve ‘firebase’ in
  24. children prop in React component
  25. React Error: Target Container is not a DOM Element
  26. Is it possible to use dotenv in a react project?
  27. having multiple instance of same reusable redux react components on the same page/route
  28. add raw HTML with inside Gatsby React page
  29. how to render child components in react.js recursively
  30. Extending React.js components

Leave a Comment