reactjs event listener beforeunload added but not removed

Question

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?

Weddle

Answer 1

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>
  );
};

Atheistic

Any idea why this works for refresh but not for going back? – Adrianaadriane

It won't work if you're routing doesn't unload the component. – Atheistic

@OriDrori sure! – Coda

Thanks Its worked for me Let me know how can we implement the same in tab close and back button – Enteron

Here's a Typescript version: github.com/jacobbuck/react-beforeunload/issues/13 – Brazee

Answer 2

Ori's solution didn't work for me. I had to do this to make it work... (Thank you docs)

  componentDidMount() {
    window.addEventListener('beforeunload', this.handleLeavePage);
  }

  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.handleLeavePage);
  }

  handleLeavePage(e) {
    const confirmationMessage = 'Some message';
    e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
    return confirmationMessage;              // Gecko, WebKit, Chrome <34
  }

Sanguinary

If you want to refer to your react component (this), change the second line to this.handleLeavePage.bind(this) – Sanguinary

This only works on Chrome for me. Not firefox or safari. – Nostril

Ah. Just so nobody makes the same mistake as I did at first - the confirmationMessage cannot be blank or no popup will appear. Now works in Chrome, Firefox, and Safari – Nostril

Answer 3

You can use following hook:

https://www.npmjs.com/package/react-beforeunload

Example:

import { Beforeunload } from 'react-beforeunload';

// ...

<Beforeunload onBeforeunload={(event) => event.preventDefault()}>
  <MyApp />
</Beforeunload>

Suborder

Answer 4

Create same function and pass in addEventListener and removeEventListener. When returnValue returns a value other than null or undefined, the user will be prompted to confirm the page unload.

 import React, { PropTypes, Component } from 'react'
    
    
    class MyComponent extends Component {
        beforeUnLoad = e => {
          e.preventDefault();
          e.stopImmediatePropagation();
          e.returnValue = "leave";
    
      };
    
        componentDidMount() {
           window.addEventListener("beforeunload", this.beforeUnLoad)
        }
    
        componentWillUnmount() {
            window.removeEventListener("beforeunload", this.beforeUnLoad)
        }
    
        render() {
    
            return (
                <div>
                    Some content
                </div>
            )
        }
    
    }
    
    export default MyComponent

Cingulum

Answer 5

hooks/FC answer:

const MyComponent = () => {

 const beforeUnLoad = (e) => {
   e.preventDefault();
   e.stopPropagation();
   e.returnValue = '';
 }
    
 useEffect(() => {
   window.addEventListener('beforeunload', beforeUnLoad);
  
   return () => {
     window.removeEventListener('beforeunload', beforeUnLoad);
   };
 }, []);

 return <>Hello World</>
}

Isometropia