---
title: "Discussion on \"Unsaved Changes Alert and Unsubmitted Data Preservation on Page Exit in React App\" | Hashnode"
description: "Discussion on \"Unsaved Changes Alert and Unsubmitted Data Preservation on Page Exit in React App\". Show Unsaved Changes Alert and Preserve Unsubmitted Data like Facebook Using React and React Router Dom (v6)"
url: "https://hashnode.com/posts/unsaved-changes-alert-and-unsubmitted-data-preservation-on-page-exit-in-react-app/6562a6ad87de4e0e3922d3e6"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Unsaved Changes Alert and Unsubmitted Data Preservation on Page Exit in React App](https://robiul.dev/unsaved-changes-alert-and-unsubmitted-data-preservation-on-page-exit-in-react-app?utm_source=hashnode&utm_medium=feed)

Show Unsaved Changes Alert and Preserve Unsubmitted Data like Facebook Using React and React Router Dom (v6)

Nov 26, 2023 · 27 min read · robiul.dev  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#javascript](https://hashnode.com/tag/javascript)
-   [#web-development](https://hashnode.com/tag/web-development)
-   [#tutorial](https://hashnode.com/tag/tutorial)
-   [#frontend-development](https://hashnode.com/tag/frontend-development)

## Written by

[Robiul H.](https://hashnode.com/@robiulhr)

@robiulhr · Bhairab Bazar, Bangladesh

  
[View profile](https://hashnode.com/@robiulhr)

Professional Web Developer

🕵🏻 Professional Web Developer ✍ Technical Writer • 👨‍💻 Making Web Development easier for beginners • ⚡ JavaScript & Node js

## Responses 2

Markdown supported · ⌘↵ to post

[Tech Simplified](https://hashnode.com/@techsimplifiednews)

[Feb 9](https://hashnode.com/posts/unsaved-changes-alert-and-unsubmitted-data-preservation-on-page-exit-in-react-app/6562a6ad87de4e0e3922d3e6/comment/698a6844575957db90801524)

This is such a valuable UX pattern! I've implemented similar functionality and the user feedback is always positive. The beforeunload event handling you've shown is spot on. Pro tip: consider also implementing a draft auto-save mechanism alongside this to give users extra peace of mind. The combination of unsaved change alerts + auto-drafts creates a really robust content preservation system.

[Siddharth](https://hashnode.com/@sidgujrathi)

[Nov 28, 2023](https://hashnode.com/posts/unsaved-changes-alert-and-unsubmitted-data-preservation-on-page-exit-in-react-app/6562a6ad87de4e0e3922d3e6/comment/65655136d27a730438f45d3d)

Excellent article Robiul, Thank you for sharing this. Will definately try these alternatives, one quick question - Do you this will also work with browser close? If not do you know a reliable way where we can do API call on browser close reliably?

[Robiul H.](https://hashnode.com/@robiulhr)

[Nov 28, 2023](https://hashnode.com/posts/unsaved-changes-alert-and-unsubmitted-data-preservation-on-page-exit-in-react-app/6562a6ad87de4e0e3922d3e6/comment/65655136d27a730438f45d3d#reply-65657acc4628c2732a755646)

Thanks for your good word [Siddharth](https://hashnode.com/@sidgujrathi). Regarding your question, yes, this will work for browser close in the same way. Also, it will work for all major browsers.