Question

144

reactjs event listener beforeunload added but not removed

rated 0 times [ 149] [ 5] / answers: 1 / hits: 95415 / 8 Years ago, tue, august 23, 2016, 12:00:00

I have a react component like :

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





class MyComponent extends Component {



    componentDidMount() {

       window.addEventListener(beforeunload, function (event) {

            console.log(hellooww)

            event.returnValue = Hellooww

        })

    }



    componentWillUnmount() {

        window.removeEventListener(beforeunload, function (event) {

            console.log(hellooww)

            event.returnValue = Hellooww

        })

    }



    render() {



        return (

            <div>

                Some content

            </div>

        )

    }



}



export default MyComponent

Here event lister is added to the component. When I refresh the page it gives me pop up asking to leave the page.

But when I go to another page and do refresh it again shows the same pop-up.

I am removing the eventListener from the component on componentWillUnmount. Then why it is not being removed?

How can I remove the beforeunload event on other pages?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryanulyssesb

Add To Favorites

Follow

Total Points: 91

Total Questions: 105

Total Answers: 102

Location: England

Member since Tue, Sep 8, 2020

4 Years ago

ryanulyssesb questions

1 Vue 3: `defineProps` are referencing locally declared variables

Sat, Nov 13, 21, 00:00, 3 Years ago

1 How to put file path in package.json file

Sat, Mar 20, 21, 00:00, 3 Years ago

1 How to test dynamic imports (then and catch) with Jest

Mon, Sep 14, 20, 00:00, 4 Years ago

1 Sending data from Python to Javascript using EEL

Mon, Mar 9, 20, 00:00, 4 Years ago

1 SyntaxError: Unexpected token / in JSON at position 132

Sun, Jul 7, 19, 00:00, 5 Years ago

View All

answered 8 Years ago stacyl · Accepted Answer

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>

  );

};