Warn Users When Leaving a Page in React with beforeunload

Prevent navigation or page refreshing with unsaved changed using the beforeunload event in a React app.
We'll walk through setting up the beforeunload event listener inside of a useEffect hook and watching for changes in the form to dynamically apply the listener only when needed.
Dig deeper into Full Stack React with my upcoming Appwrite course: spacejelly.dev...
📺 KZbin: kzbin.info...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayoc...
🎥 What I Use: www.colbyfayoc...
#colbyfayock #reactjs #webdevelopment

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@jawyor-k3t]

Every time I check in, you have added some unique and interesting project videos. You explain things very clearly and talk smoothly. Great job dude

[@colbyfayock]

thank you!!

[@adamjamiu6764]

I swear to God. I have been searching the whole internet for this functionality. Big Gracias to you fayock❤

[@colbyfayock]

glad this made it over to you!! 🙌 no problem

[@BjornBrasse]

Again a great video, very clearly explained, thanks!!! 😊

[@colbyfayock]

no problem!!

[@chandanthakur996]

Great explanation Colby. Thanks a lot!

[@colbyfayock]

no problem!

[@urosmilosavljevic5082]

This works for reloading or closing the tab, but how do you handle the case when user uses in-app navigation like links?

[@colbyfayock]

assuming you're using a router, you could watch for route change, though that wouldn't be _before_ the page leaves, that would be technically after. you'd have to be able to hook into the routing lifecycle somehow

[@jamildanielsson3236]

@urosmilosavljevic5082 Did you find a solution for this? I am having the same problem

[@pavelstraka9960]

@@jamildanielsson3236 I have the same issue, I need to detect the in app change

[@mageshmagi6167]

@@jamildanielsson3236 same problem here any solution ?

[@user-jr5go9ye5o]

I wish you would show the whole code, its difficult to follow with half the screen of the actual code cut off

[@colbyfayock]

sorry about that, trying to get better at hiding the sidebar and a little less zoomed in when working through the code

[@thanglong9549]

In the case of using useNavigate of react-router-dom v6 to redirect when clicking on a button, it cannot prevent navigation.

[@colbyfayock]

im not familiar with that API but i suspect the JS used for navigation there isn't triggering the beforeunload event

[@codewithyunus8423]

hey Colby Fayock nice explanation

[@colbyfayock]

Thank you!

[@user-sm4cs6un2z]

how can i add a custom alert message on screen when reloading, rather than showing the inbuilt browser alert like u did ?

[@colbyfayock]

unfortunately my understanding is that they removed the ability because people were abusing that (of course they were), so i dont think you're able to

[@user-sm4cs6un2z]

@@colbyfayock ok thnx

[@user-xm2ge3pm3t]

this is only working for refresh , if I am clicking on different navItems in navbar, when Route changes its not working. Is there any other function for that

[@colbyfayock]

not that im aware of, you can try to detect the mouse movement to make a guess that they're going to switch tabs, but dont believe there's a function. switching tabs doesnt close the tab, hence why it wouldnt fire

[@vendjin]

Tell me, does this work in such a case? If the tab is closed, send a request to the API, and if you reload the page, then no action is required to send to the API

[@colbyfayock]

if im undersatnding your scenario correctly, if the user closes the tab, you're not able to then make a new API request. this is a mechnanism to provide a warning if someone tries to close the tab if there are changes on the page or potentially in the middle of an API request that already exists, but haven't tested that

[@user-ck8px9pp4x]

What if my site has links to another pages?

[@kumart2025]

Can you prvide any useful resource for react 0.14 and react-route 2.2?

[@suwetaaramesh1867]

@colbyfayock but this happens only in homepage. Could you tell me how to trigger this in subpages?

[@colbyfayock]

do you mean after navigating to another page clientside? what router are you using?

[@brijspy]

can we change the text to have our own text inside the dialog that pops up ?

[@colbyfayock]

unfortunately i dont believe you're currently able to customize that

[@jac4020]

How do you hand both page refresh and browser back button? Thanks

[@colbyfayock]

hey can you elaborate on what you mean? can you give me an example?

[@CetateanulDinFiguraAlaturata]

@@colbyfayock I think he means to ask if browser back button is covered by this? If not, how do you do it?

[@colbyfayock]

@@CetateanulDinFiguraAlaturata the video shows it working for refresh. it should work with back button with the exception that apparently firefox doesn't support the back/forward button cache and may depend on how you're providing routing in the application, particularly if you're not properly updating the browser state

[@mocastello9253]

great video! thankks alot ❤

[@colbyfayock]

no problem!

[@jerahmeelsalayog1720]

how can I use custom modal instead of default prompt?

[@colbyfayock]

This API doesn't support custom modals due to people trying to abuse the functionality for what I assume was things like spam

[@jerahmeelsalayog1720]

@@colbyfayock Thanks for the info!

[@AbuTaher-vx2oe]

but it is not working my case

[@colbyfayock]

what issue did you run into?

[@AbuTaher-vx2oe]

actually., im using wavesurfer for audio visualization on vite reactjs. before move another route need to wavesurfer destroy. but if i use return on useEffect it is not working. if destroy function use button onClick then it is working. but my main issue when user click on browser back/left arrow/button or browser forward/right arrow/button still need to destroy

[@AbuTaher-vx2oe]

@@colbyfayock (what issue did you run into?) i'm using recatjs vite. it is working sometimes after leaving from route

[@colbyfayock]

@@AbuTaher-vx2oe this solution isn't using useEffect to achieve the desired effect, it only uses it for setting up the event listener for the browser event. once the event occurs, the browser specifically doesn't allow simply anything to be triggered because of the potential for abuse, so you can't really perform custom functionality like it appears you're intending to do from my understanding of the PAI

[@noicehockey9920]

Thanks.    A lot.

[@colbyfayock]

no problem!