Custom hook to identify unsaved changes in ReactJs

When users are filling out the long forms it might happen that they forget they made changes and without saving those changes they might close that tab or just click on the link or another action item on your website.

In this case, we can help users and give a better user experience by telling them that they have unsaved changes.

For that, we can build a custom hook which we can use everywhere,

[embed]

In this hook, we are using Promt component from react-router-dom.

When there are changes we can update the isDirty as true and when those changes are saved we can make it false.

When the user tries to move from the page and there are unsaved changes this is how it will look.

https://app.skillspace.ai/

And when a user tries to close the tab then also we can notify about the unsaved changes but in that case, the browser will show the default message which we can’t change as of now,

https://app.skillspace.ai/

That’s it now you can use this hook anywhere you want to notify users about the changes they made and forgot to save🙂.

Reference: https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes

Do give this article a clap 👏 , if you found it useful.