Inertia.js v3.8: WhenMounted &amp; BigInt Props | 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. WhenMounted and BigInt Props in Inertia.js v3.8

   [Laravel](https://www.msaied.com/public/articles?category=laravel) 

 WhenMounted and BigInt Props in Inertia.js v3.8
================================================

 Inertia.js v3.8.0 ships a WhenMounted component for SSR-safe browser-only rendering, native BigInt support for large PHP integers, fixed Form callbacks, and stale optimistic-response protection.

 ![](https://cdn.msaied.com/01M22N44A70A5MC2S599JP0MPH.webp) [Mohamed Said](https://www.msaied.com/public#person) Published 2 Oct 2026 · Updated 2 Oct 2026 · 3 min read

ShareCopy linkCopied

 ![WhenMounted and BigInt Props in Inertia.js v3.8](https://cdn.msaied.com/729/4eab9f8b1fbacb1b12abdbafcf28331f.png) 

  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)

 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)

- [Inertia.js](https://www.msaied.com/public/articles?search=Inertia.js)
- [Laravel](https://www.msaied.com/public/articles?search=Laravel)
- [SSR](https://www.msaied.com/public/articles?search=SSR)
- [BigInt](https://www.msaied.com/public/articles?search=BigInt)
- [JavaScript](https://www.msaied.com/public/articles?search=JavaScript)

 Frequently asked questions 
---------------------------

  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.

   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 `-&gt;preserveBigIntegers()` on the `Inertia::render()` call.

   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-&gt;integer()` both accept this format without any additional configuration.

   ![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 AI SDK: Tool-Calling Agents and Conversation Persistence](https://www.msaied.com/public/articles/laravel-ai-sdk-tool-calling-agents-and-conversation-persistence-4) [Next articleLaravel Caching Strategies: Tags, Stampede Prevention, and Cache-Aside at Scale](https://www.msaied.com/public/articles/laravel-caching-strategies-tags-stampede-prevention-and-cache-aside-at-scale-2)  

   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)

 ###  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)
