title: Next Js Router beforePopState , access state of component in handler
body: <p>I am using Next js Router.beforePopState event and i want to access value of useState variable which i created in react component 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 <strong>goaway</strong> 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?</p>
  
  <pre><code>const [goAway, setGoAway] = useState("");
  
  
   const browserTabcloseHandler = e =&gt; {
     e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
     // Chrome requires returnValue to be set
     e.returnValue = "";
   };
  
   useEffect(() =&gt; {
     if (window) {
       Router.beforePopState(() =&gt; {
         //if (componentShouldBeSavedAsDraft(componentData)) {
         const result = window.confirm("are you sure you want to leave?");
         if (!result) {
           window.history.pushState("/", "");
           Router.push("/marketplace/upload-component");
         }
         console.log(goAway); // this value is always "" even though set differently in code. 
         return result;
       });
       window.onbeforeunload = browserTabcloseHandler;
     }
     //Router.events.on("routeChangeStart", handleRouteChange);
  
     return () =&gt; {
       if (window) {
         window.onbeforeunload = null;
       }
       Router.beforePopState(() =&gt; {
         return true;
       });
     };
   }, []);
  </code></pre>