Inertia.js v3.8: WhenMounted & BigInt Props | Mohamed Said [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://www.msaied.com) [ Home ](https://www.msaied.com) [ Projects ](https://www.msaied.com/projects) [ Articles ](https://www.msaied.com/articles) [ Certificates ](https://www.msaied.com/certificates) [ Contact ](https://www.msaied.com#contact-section) [ ](https://github.com/EG-Mohamed) [ Home ](https://www.msaied.com) [ Projects ](https://www.msaied.com/projects) [ Articles ](https://www.msaied.com/articles) [ Certificates ](https://www.msaied.com/certificates) [ Contact ](https://www.msaied.com#contact-section) [ home ](https://www.msaied.com) [ articles ](https://www.msaied.com/articles) WhenMounted and BigInt Props in Inertia.js v3.8 On this page 1. [ WhenMounted for Browser-Only Components ](#whenmounted-for-browser-only-components) 2. [ Big Integers as Native BigInt Values ](#big-integers-as-native-bigint-values) 3. [ Form Forwards Error and Flash Callbacks ](#form-forwards-error-and-flash-callbacks) 4. [ Out-of-Order Optimistic Responses Fixed ](#out-of-order-optimistic-responses-fixed) 5. [ History Restores After a Deploy ](#history-restores-after-a-deploy) 6. [ Key Takeaways ](#key-takeaways) ![WhenMounted and BigInt Props in Inertia.js v3.8](https://cdn.msaied.com/729/4eab9f8b1fbacb1b12abdbafcf28331f.png) [ Laravel ](https://www.msaied.com/articles?category=laravel) #Inertia.js #Laravel #SSR #BigInt #JavaScript WhenMounted and BigInt Props in Inertia.js v3.8 ================================================= 2 Oct 2026 3 min read ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) Mohamed Said Table of contents 1. [ 01 WhenMounted for Browser-Only Components ](#whenmounted-for-browser-only-components) 2. [ 02 Big Integers as Native BigInt Values ](#big-integers-as-native-bigint-values) 3. [ 03 Form Forwards Error and Flash Callbacks ](#form-forwards-error-and-flash-callbacks) 4. [ 04 Out-of-Order Optimistic Responses Fixed ](#out-of-order-optimistic-responses-fixed) 5. [ 05 History Restores After a Deploy ](#history-restores-after-a-deploy) 6. [ 06 Key Takeaways ](#key-takeaways) Inertia.js v3.8.0 is out with several developer-quality improvements: a `WhenMounted` component that keeps browser-only code out of SSR, opt-in `BigInt` support for integers beyond JavaScript's safe range, forwarded `Form` callbacks, and a fix for stale optimistic responses. WhenMounted for Browser-Only Components --------------------------------------- Contributed by Evan Burrell, `WhenMounted` is available for the React, Vue, and Svelte adapters. Components that read `window` or `document` during SSR throw a "window is not defined" error. `WhenMounted` renders a `fallback` slot on the server and switches to its children once the component has mounted in the browser. **Vue example:** ```vue Loading chart... ``` **React example** — children must be a function so JSX is not evaluated on the server: ```javascript {() => } ``` The fallback is shown only during SSR and the first hydration render, preventing hydration mismatches. A `WhenMounted` that mounts after a client-side visit renders its children immediately. Big Integers as Native BigInt Values ------------------------------------ PHP sends 64-bit integers — such as Snowflake IDs — as plain JSON numbers. JavaScript silently rounds anything outside its safe integer range (`Number.MAX_SAFE_INTEGER`), so `900719925474099988` becomes `900719925474100000` with no error. Pascal Baljet added opt-in support that requires **inertia-laravel v3.5.0**. Enable it globally in `config/inertia.php` via the `preserve_big_integers` option (or the `INERTIA_PRESERVE_BIG_INTEGERS` env var), or per-response: ```php return Inertia::render('Orders/Show', [ 'id' => $order->id, ])->preserveBigIntegers(); ``` The server adapter encodes large integers as `{ "$bigint": "..." }` markers; the client deserializes them as native `BigInt` values. Integers within the safe range remain regular numbers. ```javascript defineProps({ id: BigInt }) ``` ```vue Order {{ id }} ``` When a `BigInt` is submitted back through a form or Precognition, it is sent as a string of digits, which Laravel's `integer` validation rule and `$request->integer()` both accept. Form Forwards Error and Flash Callbacks --------------------------------------- Dale Weaver fixed the `` component so it now correctly forwards `onHttpException`, `onNetworkError`, `onBeforeUpdate`, and `onFlash` to the underlying visit. These props existed but were never passed through, meaning HTTP 500s and network failures on form submissions silently swallowed the callbacks. Returning `false` from an error callback still stops default handling, matching the behaviour of `useForm`. ```vue ``` Out-of-Order Optimistic Responses Fixed --------------------------------------- When two optimistic updates were in flight and the first request's response arrived after the second, Inertia applied the stale props and visually rolled back the newer update. Optimistic requests now carry an ID; a response is discarded when a later optimistic request has already succeeded. A failed newer request does not block an older successful response from applying. History Restores After a Deploy ------------------------------- Lazizbek Ergashev fixed back/forward navigation across a deploy. Previously, Inertia restored page state from history without checking the asset version, causing props from the old bundle to be rendered with the new one. Inertia now compares versions and renders the freshly loaded page when they differ. Key Takeaways ------------- - **`WhenMounted`** eliminates "window is not defined" SSR crashes for browser-only components in Vue, React, and Svelte. - **BigInt props** require `inertia-laravel v3.5.0` and are opt-in; integers in the safe range are unaffected. - **Form callbacks** (`onHttpException`, `onNetworkError`, etc.) now work correctly on the `` component. - **Stale optimistic responses** no longer roll back newer in-flight updates. - **History restores** now respect asset versions after a deploy. --- Source: [Laravel News — WhenMounted and BigInt Props in Inertia.js v3.8](https://laravel-news.com/inertia-3-8-0) Found this useful? [ ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.msaied.com%2Farticles%2Fwhenmounted-and-bigint-props-in-inertiajs-v38&text=WhenMounted+and+BigInt+Props+in+Inertia.js+v3.8) [ ](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.msaied.com%2Farticles%2Fwhenmounted-and-bigint-props-in-inertiajs-v38) Frequently Asked Questions ---------------------------- 3 questions Q01 What problem does the WhenMounted component solve in Inertia.js? Components that access browser globals like `window` or `document` crash during server-side rendering with a "window is not defined" error. `WhenMounted` renders a fallback on the server and only renders its children after the component has mounted in the browser, preventing SSR crashes and hydration mismatches. Q02 Do I need to change anything in Laravel to use BigInt props in Inertia.js v3.8? Yes. BigInt support is opt-in and requires inertia-laravel v3.5.0. You can enable it globally via the `preserve_big_integers` option in `config/inertia.php` (or the `INERTIA_PRESERVE_BIG_INTEGERS` env var), or per-response by calling `->preserveBigIntegers()` on the `Inertia::render()` call. Q03 How are BigInt values submitted back to Laravel from a form? When a BigInt prop is submitted through a form, Precognition, or the router, Inertia sends it as a plain string of digits. Laravel's `integer` validation rule and `$request->integer()` both accept this format without any additional configuration. Continue reading More Articles --------------- [ View all ](https://www.msaied.com/articles) [ ![Eloquent Custom Relations: Polymorphic Pivots, Has-One-Of-Many, and Raw Join Relations](https://cdn.msaied.com/728/b96439f5ef5f084b44d736951875f964.png) laravel eloquent database ### Eloquent Custom Relations: Polymorphic Pivots, Has-One-Of-Many, and Raw Join Relations Beyond belongsTo and hasMany lies a set of underused Eloquent relation types that eliminate ugly query hacks.... ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) Mohamed Said 2 Oct 2026 3 min read Read ](https://www.msaied.com/articles/eloquent-custom-relations-polymorphic-pivots-has-one-of-many-and-raw-join-relations) [ ![Laravel Caching Strategies: Tags, Stampede Prevention, and Cache-Aside at Scale](https://cdn.msaied.com/727/7873d7495db459e7a6e3bfbb8835852d.png) laravel caching redis ### Laravel Caching Strategies: Tags, Stampede Prevention, and Cache-Aside at Scale Beyond simple remember() calls: how to use cache tags for granular invalidation, prevent thundering-herd stamp... ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) Mohamed Said 2 Oct 2026 3 min read Read ](https://www.msaied.com/articles/laravel-caching-strategies-tags-stampede-prevention-and-cache-aside-at-scale-2) [ ![Laravel AI SDK: Tool-Calling Agents and Conversation Persistence](https://cdn.msaied.com/726/cde0e4e03a15ea0776e82aca8727f660.png) laravel ai agents ### Laravel AI SDK: Tool-Calling Agents and Conversation Persistence Build reliable tool-calling AI agents in Laravel using the AI SDK, with typed tool definitions, structured res... ![Mohamed Said](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) Mohamed Said 1 Oct 2026 3 min read Read ](https://www.msaied.com/articles/laravel-ai-sdk-tool-calling-agents-and-conversation-persistence-4) [ ![Mohamed Said](https://cdn.msaied.com/01KT78WE565VEMM3PSNQAAB0MH.png) Mohamed Said Laravel Backend Engineer ](https://www.msaied.com)Senior Backend Engineer specializing in Laravel, scalable SaaS platforms, APIs, and cloud infrastructure. I build secure, high-performance web applications that help businesses grow. Explore - [Home](https://www.msaied.com) - [Projects](https://www.msaied.com/projects) - [Articles](https://www.msaied.com/articles) - [Certificates](https://www.msaied.com/certificates) - [Contact](https://www.msaied.com#contact-section) Connect - [ hello@msaied.com ](mailto:hello@msaied.com) - [ +20 109 461 9204 ](tel:+201094619204) © 2026 Mohamed Said. All rights reserved. [ ](https://github.com/EG-Mohamed) [ ](https://www.linkedin.com/in/msaiedm/) [ ](https://wa.me/201094619204) [ ](mailto:hello@msaied.com) [ ](https://drive.google.com/file/u/0/d/1MF20IPRJyzfy32mhEutjL5EpSls0w2Q8/view)