Inertia.js v3.7: Cancel Form Submissions In-Flight | Mohamed Said [Skip to content](#main) [ ![](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed SaidLaravel Backend Engineer ](https://www.msaied.com/public) - [Home](https://www.msaied.com/public) - [Projects](https://www.msaied.com/public/projects) - [Articles](https://www.msaied.com/public/articles) - [Certificates](https://www.msaied.com/public/certificates) - [About](https://www.msaied.com/public#about) [ Contact](https://www.msaied.com/public#contact) Menu Menu ---- Close - [HomeStart here](https://www.msaied.com/public) - [ProjectsCase studies](https://www.msaied.com/public/projects) - [ArticlesEngineering notes](https://www.msaied.com/public/articles) - [CertificatesCredentials](https://www.msaied.com/public/certificates) - [AboutHow I work](https://www.msaied.com/public#about) - [ContactGet in touch](https://www.msaied.com/public#contact) [Start a conversation](https://www.msaied.com/public#contact) [WhatsApp](https://wa.me/201094619204) [Email](mailto:hello@msaied.com) 1. [Home](https://www.msaied.com/public) 2. / 3. [Articles](https://www.msaied.com/public/articles) 4. / 5. [Laravel](https://www.msaied.com/public/articles?category=laravel) 6. / 7. Cancel In-Flight Form Submissions in Inertia.js v3.7 [Laravel](https://www.msaied.com/public/articles?category=laravel) [Open Source](https://www.msaied.com/public/articles?category=open-source) Cancel In-Flight Form Submissions in Inertia.js v3.7 ===================================================== Inertia.js v3.7.0 adds cancelOnUnmount and a cancel method to the Form component, a reactive polling value in usePoll, once-prop fixes for instant visits, and smarter async-visit cancellation. ![](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) [Mohamed Said](https://www.msaied.com/public#person) Published 28 Aug 2026 · Updated 31 Aug 2026 · 3 min read ShareCopy linkCopied ![Cancel In-Flight Form Submissions in Inertia.js v3.7](https://cdn.msaied.com/614/56bc221aef2dbb0a68623eee5882333f.png) On this page +1. [cancelOnUnmount: Abort on Navigation or Modal Close](#cancelonunmount-abort-on-navigation-or-modal-close) 2. [Exposing cancel Through Slot Props, Ref, and Context](#exposing-cancel-through-slot-props-ref-and-context) 3. [usePoll Now Returns a Reactive polling Value](#usepoll-now-returns-a-reactive-polling-value) 4. [Once Props Survive Instant Visits](#once-props-survive-instant-visits) 5. [Async Visits No Longer Cancelled by Navigation](#async-visits-no-longer-cancelled-by-navigation) 6. [Bug Fixes](#bug-fixes) 7. [Upgrade](#upgrade) 8. [Key Takeaways](#key-takeaways) Inertia.js v3.7.0 ships two targeted additions to the `` component that give you real control over in-flight submissions, plus a handful of quality-of-life improvements and bug fixes across all three adapters (Vue, React, Svelte). cancelOnUnmount: Abort on Navigation or Modal Close --------------------------------------------------- An in-flight upload does not stop just because the user closes the modal that started it. Navigation cancels requests as a side effect of the next sync request interrupting the previous one, but closing a modal interrupts nothing — the server still receives and processes the file. The new `cancelOnUnmount` attribute fixes this: ```xml Upload ``` When the form unmounts, the request is aborted. The attribute defaults to `false`, so existing forms keep their current behavior. Importantly, a submission that already succeeded is left alone — the cancel token becomes a no-op once the response has arrived, preventing a spurious `onCancel` event from firing after `onSuccess`. Exposing cancel Through Slot Props, Ref, and Context ---------------------------------------------------- The `` component has always used `useForm()` internally, but never surfaced its `cancel` method. v3.7 changes that. `cancel` is now available through the slot props (Vue), render prop (React), component ref, and form context: **Vue** ```xml Upload Cancel ``` **React** ```javascript {({ processing, cancel }) => ( Upload {processing && ( Cancel )} )} ``` usePoll Now Returns a Reactive polling Value -------------------------------------------- Previously, `usePoll` returned only `start` and `stop`, forcing you to maintain your own boolean to track polling state. The hook now returns a reactive `polling` value: ```javascript import { usePoll } from '@inertiajs/vue3' const { start, stop, polling } = usePoll(2000) ``` ```xml Pause updates Resume updates ``` `polling` reflects whether the poll is running, not whether a request is in flight. In Vue it is a `Ref`, in React it is `useState`, and in Svelte it uses `$state`. **Svelte users:** keep the returned object and read `poll.polling` — destructuring loses reactivity. Once Props Survive Instant Visits --------------------------------- Once props are resolved once and cached on the client. Instant visits swap in a placeholder page immediately while the real request runs in the background. Previously, the placeholder dropped both the once prop's value and its registry entry, causing the prop to come back empty. The router now copies remembered once props onto the placeholder page before the swap, unless the visit provides its own value for that prop. Async Visits No Longer Cancelled by Navigation ---------------------------------------------- Inertia's navigation cancellation was too broad — it cancelled all in-flight requests, including explicit async visits targeting other pages. Cancellation now matches on the request's origin and path, so only requests aimed at the page being navigated away from are cancelled. Deferred props, partial reloads, and polls still cancel as expected. Bug Fixes --------- - **React `back_forward` restore**: Tab duplication no longer leaves `usePage()` stuck on stale props. - **`replaceProp()` identity**: Path-aware immutable updates replace the previous deep clone, avoiding unnecessary re-renders of memoized components. - **`` unmount crash**: `getFormData` now returns an empty `FormData` when the form element is gone, preventing a `TypeError` from `startTransition`. Upgrade ------- ```bash npm install @inertiajs/vue3@^3.7.0 # or @inertiajs/react, @inertiajs/svelte ``` Key Takeaways ------------- - Add `cancel-on-unmount` to any `` where an abandoned submission should not reach the server. - Use the `cancel` slot prop to render a cancel button on large uploads without any extra state. - Destructure `polling` from `usePoll` instead of tracking it yourself — but in Svelte, keep the full object. - Once props and instant visits now work correctly together. - Async visits to other pages survive navigation without being cancelled. --- *Source: [Cancel In-Flight Form Submissions in Inertia.js v3.7 — Laravel News](https://laravel-news.com/inertia-3-7-0)* - [Inertia.js](https://www.msaied.com/public/articles?search=Inertia.js) - [Laravel](https://www.msaied.com/public/articles?search=Laravel) - [Vue](https://www.msaied.com/public/articles?search=Vue) - [React](https://www.msaied.com/public/articles?search=React) - [Svelte](https://www.msaied.com/public/articles?search=Svelte) - [Forms](https://www.msaied.com/public/articles?search=Forms) Frequently asked questions --------------------------- What does cancelOnUnmount do in Inertia.js v3.7?When added to a `<Form>` component, `cancelOnUnmount` aborts the in-flight HTTP request as soon as the form unmounts — for example, when a modal is closed. It defaults to `false` so existing forms are unaffected, and it is a no-op if the response has already arrived. How do I add a cancel button to an Inertia Form component?In v3.7, `cancel` is exposed through the slot props (Vue), render prop (React), component ref, and form context. In Vue, use `v-slot="{ processing, cancel }"` and bind `cancel` to a button's click handler. In React, destructure it from the render prop function. Why does usePoll in Svelte lose reactivity when destructured?The Svelte adapter moved `usePoll` to a `.svelte.ts` file and backs the `polling` value with `$state`. Destructuring a `$state`-backed object breaks the reactive binding. Keep the full object returned by `usePoll` and read `poll.polling` to retain reactivity. ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp)About the author ---------------- [Mohamed Said](https://www.msaied.com/public#person)Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. [About](https://www.msaied.com/public#about) [GitHub ↗](https://github.com/EG-Mohamed) [LinkedIn ↗](https://www.linkedin.com/in/msaiedm/) [WhatsApp ↗](https://wa.me/201094619204) [Email Address ↗](mailto:hello@msaied.com) [My CV ↗](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view) [Previous articleLaravel Starter Kits Now Ship with Vite+](https://www.msaied.com/public/articles/laravel-starter-kits-now-ship-with-vite) [Next articleLaravel API Resources: Sparse Fieldsets, Cursor Pagination, and Per-Route Rate Limiting](https://www.msaied.com/public/articles/laravel-api-resources-sparse-fieldsets-cursor-pagination-and-per-route-rate-limiting) On this page ------------- 1. [cancelOnUnmount: Abort on Navigation or Modal Close](#cancelonunmount-abort-on-navigation-or-modal-close) 2. [Exposing cancel Through Slot Props, Ref, and Context](#exposing-cancel-through-slot-props-ref-and-context) 3. [usePoll Now Returns a Reactive polling Value](#usepoll-now-returns-a-reactive-polling-value) 4. [Once Props Survive Instant Visits](#once-props-survive-instant-visits) 5. [Async Visits No Longer Cancelled by Navigation](#async-visits-no-longer-cancelled-by-navigation) 6. [Bug Fixes](#bug-fixes) 7. [Upgrade](#upgrade) 8. [Key Takeaways](#key-takeaways) ### Have a technical challenge? Tell me what you’re building. I reply within two working days. [Start a conversation](https://www.msaied.com/public#contact) Related articles ----------------- [ ![](https://cdn.msaied.com/740/cce86edc21eddcbdd2f2454fadaf9c70.png) · 3 min read### The Pipeline Pattern in Laravel: Custom Pipelines Beyond Middleware 5 Oct 2026 ](https://www.msaied.com/public/articles/the-pipeline-pattern-in-laravel-custom-pipelines-beyond-middleware-1) [ ![](https://cdn.msaied.com/739/2d6897fdcdcf090613f96f72a64b8a78.png) · 4 min read### MySQL Full-Text Search in Laravel: Indexes, Relevance Scoring, and Boolean Mode 4 Oct 2026 ](https://www.msaied.com/public/articles/mysql-full-text-search-in-laravel-indexes-relevance-scoring-and-boolean-mode) [ ![](https://cdn.msaied.com/738/073696a3fefe18bec825beec5ac658f5.png) · 4 min read### Laravel Queue Rate-Limited Middleware: Throttling Jobs Without Losing Work 4 Oct 2026 ](https://www.msaied.com/public/articles/laravel-queue-rate-limited-middleware-throttling-jobs-without-losing-work) Have a technical challenge? ---------------------------- Tell me what you’re building. I reply within two working days. [Discuss your project ↗](https://www.msaied.com/public#contact) © 2026 Mohamed Said · Built with Laravel, meant to last.Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. - [Home](https://www.msaied.com/public) - [Articles](https://www.msaied.com/public/articles) - [Certificates](https://www.msaied.com/public/certificates) - [GitHub](https://github.com/EG-Mohamed) - [LinkedIn](https://www.linkedin.com/in/msaiedm/) - [WhatsApp](https://wa.me/201094619204) - [Email Address](mailto:hello@msaied.com) - [My CV](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view) - [Sitemap](https://www.msaied.com/public/sitemap.xml)