---
title: How to detect when user leaves the page and display a confirmation dialog?
description: Learn how to use React and Next.js to show an alert asking the user to confirm they want to exit a page using the window beforeunload event listener.
url: /kb/guide/leave-page-confirmation-dialog-before-unload-nextjs-react
canonical_url: "https://vercel.com/kb/guide/leave-page-confirmation-dialog-before-unload-nextjs-react"
published: 2025-11-03
last_updated: 2025-11-10
authors: Lee Robinson
related: []
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---
<!-- docsgraph:related -->
## Related pages

> **For AI agents:** Follow these links to understand how this page connects to the rest of the Vercel ecosystem. For the full cross-link map (inbound, outbound, prerequisites, and semantic neighbors), see the .graph.md link below.

- [Designing view transitions](https://nextjs.org/docs/app/guides/view-transitions?from=related&source_path=%2Fkb%2Fguide%2Fleave-page-confirmation-dialog-before-unload-nextjs-react&source_site=vercel-kb&relationship=related) — Learn how to use view transitions to communicate meaning during navigation, loading, and content changes in a Next.js ap
- [Link Component](https://nextjs.org/docs/app/api-reference/components/link?from=related&source_path=%2Fkb%2Fguide%2Fleave-page-confirmation-dialog-before-unload-nextjs-react&source_site=vercel-kb&relationship=related) — Enable fast client-side navigation with the built-in `next/link` component.
- [How Next.js preserves UI state with Activity](https://nextjs.org/docs/app/guides/preserving-ui-state?from=related&source_path=%2Fkb%2Fguide%2Fleave-page-confirmation-dialog-before-unload-nextjs-react&source_site=vercel-kb&relationship=related) — Learn how React's Activity component preserves UI state across navigations in Next.js and how to control what resets.
- [Handling connectivity drops](https://nextjs.org/docs/app/guides/offline-support?from=related&source_path=%2Fkb%2Fguide%2Fleave-page-confirmation-dialog-before-unload-nextjs-react&source_site=vercel-kb&relationship=related) — How a Next.js app can recover when the network drops mid-fetch or mid-Server Action, and how to communicate that state t
- [Linking and Navigating](https://nextjs.org/docs/app/getting-started/linking-and-navigating?from=related&source_path=%2Fkb%2Fguide%2Fleave-page-confirmation-dialog-before-unload-nextjs-react&source_site=vercel-kb&relationship=related) — Learn how the built-in navigation optimizations work, including prefetching, prerendering, and client-side navigation, a
- [Redacting Sensitive Data from Web Analytics Events](https://vercel.com/docs/analytics/redacting-sensitive-data?from=related&source_path=%2Fkb%2Fguide%2Fleave-page-confirmation-dialog-before-unload-nextjs-react&source_site=vercel-kb&relationship=related) — Learn how to redact sensitive data from your Web Analytics events.
- [Consent Page](https://vercel.com/docs/sign-in-with-vercel/consent-page?from=related&source_path=%2Fkb%2Fguide%2Fleave-page-confirmation-dialog-before-unload-nextjs-react&source_site=vercel-kb&relationship=related) — Learn how the consent page works when users authorize your app
- [Suspense Fallbacks](https://flags-sdk.dev/docs/frameworks/next/examples/suspense-fallbacks?from=related&source_path=%2Fkb%2Fguide%2Fleave-page-confirmation-dialog-before-unload-nextjs-react&source_site=vercel-kb&relationship=related) — How to use feature flags with Suspense fallbacks to serve variants of a Partial Prerendered shell.
- [Optimizing hard navigations](https://vercel.com/kb/guide/optimizing-hard-navigations?from=related&source_path=%2Fkb%2Fguide%2Fleave-page-confirmation-dialog-before-unload-nextjs-react&source_site=vercel-kb&relationship=related) — Learn how to improve performance for navigations that require a full page reload
- [Updating large-scale site navigation with minimal revalidation](https://vercel.com/kb/guide/update-mega-nav-min-reval?from=related&source_path=%2Fkb%2Fguide%2Fleave-page-confirmation-dialog-before-unload-nextjs-react&source_site=vercel-kb&relationship=related) — When working with a large number of pages that share a common multi-level navigation, making a navigation update require

Full cross-link map for this page: [/kb/guide/leave-page-confirmation-dialog-before-unload-nextjs-react.graph.md](/kb/guide/leave-page-confirmation-dialog-before-unload-nextjs-react.graph.md?from=related&source_path=%2Fkb%2Fguide%2Fleave-page-confirmation-dialog-before-unload-nextjs-react&source_site=vercel-kb&relationship=graph)
<!-- /docsgraph:related -->


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.

```jsx
// 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]);
```