useOnBeforeUnload() on expensive dirty flag

[bebbi]

Is your feature request related to a problem? Please describe.

I've considered the useOnBeforeUnload hook to warn if a doc has unsaved changes.
But it makes no sense because the dirty boolean flag is expensive to calculate (it's a deep comparison between serialized objects).

The way the hook currently works I have to recalculate the dirty flag much more often than necessary.

Describe the solution you'd like

I'd like to propose that

1. the useOnBeforeUnload hook always registers a handler.
2. I can optionally provide a dirty function instead of a boolean
3. The handler, if called before window unload, calls dirty() if it's a function, but only at the actual time of unload where it's relevant.

That would reduce an expensive calculation to once when it's needed.
For simplicity, I think the approach can be the same for a boolean dirty flag since the handler won't take up noticeable resources.

Describe alternatives you've considered

I have considered flagging the isDirty on any doc change and avoiding re-calculation once it's true, but that doesn't make much sense because there's so many changes to the doc variable that are not relevant anymore after it's serialized (such as selection changes).

So it looks like I can either PR this for you or build my own hook.

[streamich]

Would allowing enabled to be a function solve your performance concert?

useBeforeUnload(() => true, 'Are you sure?');

---

• Allow enabled parameter to be a function
  • If enabled is a function it should execute only when component detects "unload" event
• Still support old behaviour where, enabled is a boolean.

[bebbi]

@streamich Yes, that looks good, I've enabled this in my own version.
The key was to supply a callback that compares refs, then it doesn't need to reload a new listener everytime the value changes. Let me know if you're interested in a PR.

[streamich]

@bebbi If you would like to create a PR, would be great!

[streamich]

🎉 This issue has been resolved in version 13.25.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀