# How to detect when user leaves the page and display a confirmation dialog?

**Author:** Lee Robinson

---

When handling a data mutation on your page, it can be beneficial to prevent the user from leaving or closing the page until the action has fully completed.

This guide will show an example of this pattern using React and Next.js.

## Confirm navigation away with event listener

The browser provides an event listener you can use to handle the user attempting to close the window or tab called [`beforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event). We can add a global event listener for this event and use our React state to derive whether it should ask for confirmation or not.

`// This could be useState, useOptimistic, or other state let pending = false; useEffect(() => { if (!pending) return; function beforeUnload(e: BeforeUnloadEvent) { e.preventDefault(); } window.addEventListener('beforeunload', beforeUnload); return () => { window.removeEventListener('beforeunload', beforeUnload); }; }, [pending]);`

---

[View full KB sitemap](/kb/sitemap.md)