React | How to detect Page Refresh (F5)

Question

I'm using React js. I need to detect page refresh. When user hits refresh icon or press F5, I need to find out the event.

I tried with stackoverflow post by using javascript functions

I used javascript function beforeunload still no luck.

onUnload(event) { 
  alert('page Refreshed')
}

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

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

here I have full code on stackblitz

Why not just check for `e.keyCode === 116`, which is the F5 key? Here is an example of how to do that: https://stackoverflow.com/a/34634290/2127769 — Ralph David Abernathy, Apr 25 '18 at 15:56
There may be two scenarios browser refresh button click and F5 press — Maria Jeysingh Anbu, Apr 25 '18 at 15:58

score 24 · Accepted Answer · edited Apr 25 '18 at 18:21

24

Place this in the constructor:

if (window.performance) {
  if (performance.navigation.type == 1) {
    alert( "This page is reloaded" );
  } else {
    alert( "This page is not reloaded");
  }
}

It will work, please see this example on stackblitz.

edited Apr 25 '18 at 18:21

Will

672
9
21

answered Apr 25 '18 at 16:05

Abdellatif Derbel

434
3
8

2

But there is the problem. It is getting triggered even page changing. not only page refresh. I need only page refresh – Maria Jeysingh Anbu Apr 25 '18 at 16:22
Just change the content of conditions – Abdellatif Derbel Apr 25 '18 at 16:26
2

I'm using react router. when I switch menu It is getting triggered – Maria Jeysingh Anbu Apr 25 '18 at 16:28
Please see the alert text, if page refresh an alert "This page is reloaded" will be triggered , else another alert "this page is not reloaded" will be triggered. So you can use just the first condition – Abdellatif Derbel Apr 25 '18 at 17:56
@MariaJeysinghAnbu is saying corrent it trigger the refresh alert even route changed in IE. In IE even if user changes route its values is 1 but in chrome its working differently – CyberAbhay Mar 08 '19 at 08:47
will this work if the user clicks on the refresh button instead F5? – Deekshith Bucky Apr 07 '20 at 00:16
How do you do something AFTER refresh has complete? – shan Apr 08 '20 at 20:27
1

This is deprecated now. `PerformanceNavigationTiming` should be used instead. – Konrad Linkowski May 05 '22 at 08:54

score 20 · Answer 2 · answered Dec 20 '20 at 13:51

If you're using React Hook, UseEffect you can put the below changes in your component. It worked for me

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

Will · Answer 3 · 2018-04-25T15:52:56.407

11

Your code seems to be working just fine, your alert won't work because you aren't stopping the refresh. If you console.log('hello') the output is shown.

UPDATE ---

This should stop the user refreshing but it depends on what you want to happen.

componentDidMount() {
    window.onbeforeunload = function() {
        this.onUnload();
        return "";
    }.bind(this);
}

edited Apr 25 '18 at 15:52

answered Apr 25 '18 at 15:36

Will

672
9
21

can I call any function in that `onUnload` function? becoz I tried it seems not working. – Maria Jeysingh Anbu Apr 25 '18 at 15:42
You need to prompt the user with something that will stop the refresh. What function are you trying to place inside `onUnload`? I'll update my answer with an example. – Will Apr 25 '18 at 15:47
Only on page refresh I have to call a function like this `this.props.actions.loaddata()` – Maria Jeysingh Anbu Apr 25 '18 at 15:50
Thank You. I think, It has been called before page load. I need after user refresh the page – Maria Jeysingh Anbu Apr 25 '18 at 15:56
1

Abdellatif seems to have a better solution than mine for that. – Will Apr 25 '18 at 16:11

score 10 · Answer 4 · answered Dec 26 '18 at 15:31

10

Unfortunately currently accepted answer cannot be more considered as acceptable since performance.navigation.type is deprecated

The newest API for that is experimental ATM. As a workaround I can only suggest to save some value in redux (or whatever you use) store to indicate state after reload and on first route change update it to indicate that route was changed not because of refresh.

answered Dec 26 '18 at 15:31

Rvach.Flyver

164
1
7

didn't think redux survived a browser refresh – nrmad Jul 19 '21 at 10:49
It is not, but it could be used to identify route change by setting some global state flag. In case the flag has default value, it means we are in state after refresh, otherwise it is the route change. – Rvach.Flyver Jul 20 '21 at 09:27

Michael Harley · Answer 5 · 2021-03-31T08:54:57.703

9

It is actually quite straight-forward, this will add the default alert whenever you reload your page.

Functional Component

useEffect(() => {
    window.onbeforeunload = function() {
        return true;
    };

    return () => {
        window.onbeforeunload = null;
    };
}, []);

Class Component

componentDidMount(){
    window.onbeforeunload = function() {
        return true;
    };
}

componentDidUnmount(){
    window.onbeforeunload = null;
}

You can put validation to only add alert whenever the condition is true.

Functional Component

useEffect(() => {
    if (condition) {
        window.onbeforeunload = function() {
            return true;
        };
    }

    return () => {
        window.onbeforeunload = null;
    };
}, [condition]);

Class Component

componentDidMount(){
    if (condition) {
        window.onbeforeunload = function() {
            return true;
        };
    }
}

componentDidUnmount(){
    window.onbeforeunload = null;
}

edited Mar 31 '21 at 08:54

answered Feb 18 '21 at 16:16

Michael Harley

628
1
6
16

How can i use this code in react.js class component ? – Mayur Vaghasiya Mar 10 '21 at 09:23
1

@Mayur Vaghasiya, you can use `componentDidMount` and `componentDidUnmount` function for the Class Component. The one on my useEffect is for `componentDidMount` and the one on my useEffect's return is for `componentDidUnmount`. I'll edit my answer later when I have the time. – Michael Harley Mar 11 '21 at 12:44
Is there any way to modify the message in the prompt that comes after reloading? – Dhiraj Sharma May 06 '21 at 06:34

score 4 · Answer 6 · answered Sep 08 '20 at 10:45

4

If you are using either REDUX or CONTEXT API then its quite easy. You can check the REDUX or CONTEXT state variables. When the user refreshes the page it reset the CONTEXT or REDUX state and you have to set them manually again. So if they are not set or equal to the initial value which you have given then you can assume that the page is refreshed.

answered Sep 08 '20 at 10:45

Nitesh Malviya

704
7
16

Initially I found this approach useful, but then I found it had created a bug for me, so now what I'm doing is storing a string prop called currentPage in one of my redux reducers from my componentDidMount but checking its value before setting it, to ensure that the previous page was a different page and not simply a reload. Time will tell if this is a good approach or not – Joseph Beuys' Mum Sep 25 '20 at 09:17

React | How to detect Page Refresh (F5)

6 Answers6

Functional Component

Class Component

Functional Component

Class Component

Linked

Related