I am using Next js Router.beforePopState event and i want to access value of useState variable which i created in react ponent in which this handler is defined, sample code below , but whenever i access the state it is empty or set to default value for example in below code goaway state value i always get in handler as empty string "" even though i have set in code a different value, is there a way i can get the state value in handler?

const [goAway, setGoAway] = useState("");


 const browserTabcloseHandler = e => {
   e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
   // Chrome requires returnValue to be set
   e.returnValue = "";
 };

 useEffect(() => {
   if (window) {
     Router.beforePopState(() => {
       //if (ponentShouldBeSavedAsDraft(ponentData)) {
       const result = window.confirm("are you sure you want to leave?");
       if (!result) {
         window.history.pushState("/", "");
         Router.push("/marketplace/upload-ponent");
       }
       console.log(goAway); // this value is always "" even though set differently in code. 
       return result;
     });
     window.onbeforeunload = browserTabcloseHandler;
   }
   //Router.events.on("routeChangeStart", handleRouteChange);

   return () => {
     if (window) {
       window.onbeforeunload = null;
     }
     Router.beforePopState(() => {
       return true;
     });
   };
 }, []);

I am using Next js Router.beforePopState event and i want to access value of useState variable which i created in react ponent in which this handler is defined, sample code below , but whenever i access the state it is empty or set to default value for example in below code goaway state value i always get in handler as empty string "" even though i have set in code a different value, is there a way i can get the state value in handler?

const [goAway, setGoAway] = useState("");


 const browserTabcloseHandler = e => {
   e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
   // Chrome requires returnValue to be set
   e.returnValue = "";
 };

 useEffect(() => {
   if (window) {
     Router.beforePopState(() => {
       //if (ponentShouldBeSavedAsDraft(ponentData)) {
       const result = window.confirm("are you sure you want to leave?");
       if (!result) {
         window.history.pushState("/", "");
         Router.push("/marketplace/upload-ponent");
       }
       console.log(goAway); // this value is always "" even though set differently in code. 
       return result;
     });
     window.onbeforeunload = browserTabcloseHandler;
   }
   //Router.events.on("routeChangeStart", handleRouteChange);

   return () => {
     if (window) {
       window.onbeforeunload = null;
     }
     Router.beforePopState(() => {
       return true;
     });
   };
 }, []);

• javascript
• reactjs
• next.js

1 Answer 1

i was able to find solution for same what i was missing is adding property in useEffect below code fixed the issue-

const [goAway, setGoAway] = useState("");


 const browserTabcloseHandler = e => {
   e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
   // Chrome requires returnValue to be set
   e.returnValue = "";
 };

 useEffect(() => {
   if (window) {
     Router.beforePopState(() => {
       //if (ponentShouldBeSavedAsDraft(ponentData)) {
       const result = window.confirm("are you sure you want to leave?");
       if (!result) {
         window.history.pushState("/", "");
         Router.push("/marketplace/upload-ponent");
       }
       console.log(goAway); // this value is always "" even though set differently in code. 
       return result;
     });
     window.onbeforeunload = browserTabcloseHandler;
   }
   //Router.events.on("routeChangeStart", handleRouteChange);

   return () => {
     if (window) {
       window.onbeforeunload = null;
     }
     Router.beforePopState(() => {
       return true;
     });
   };
 }, [goAway]); // this fixed the issue