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

Answer 1

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.

Answer 2

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 = "";   };