Render with Inertia

This is the normal frontend path for an InertiaX application. @inertiax/react-inertia reads a named Inertia prop, renders the complete Table, and turns interactions into partial reloads.

Render a named prop

Laravel returns the Table under its ID:

return Inertia::render('Users/Index', [
    UsersTable::make('users')->data(User::query()),
]);

React renders that same prop name:

import { InertiaX } from '@inertiax/react-inertia';

export default function UsersIndex() {
  return <InertiaX prop="users" />;
}

The installation guide mounts one InertiaXProvider above Inertia’s App. Keep that application owner in place instead of creating a new runtime in each page.

The adapter validates that the prop contains a complete InertiaX Table result. A missing, malformed, or mismatched prop fails with context instead of silently rendering stale data.

What happens on interaction

When a user searches, filters, sorts, paginates, or refreshes:

1. Core produces validated canonical Table state.
2. The adapter writes state into this Table’s namespaced browser location.
3. It asks Inertia to reload only the named prop.
4. Laravel re-materializes the Table and applies the new state.
5. The returned Table result replaces the current rows and state.

Other page props are preserved. Multiple Tables use independent namespaces and can reload without sharing request identity or URL state.

Request safety

The adapter and portable request coordinator work together to provide:

• debounce for rapid state transitions;
• cancellation of obsolete Inertia visits where the host exposes it;
• latest-result safety when an older request finishes after a newer one;
• pending, success, and error state for the renderer;
• retry and refresh through the same canonical request path.

You should not add a second request-order guard around <InertiaX>. If a loading or concurrency case behaves unexpectedly, keep the complete request timeline and follow the troubleshooting guide.

Tune debounce

<InertiaX prop="users" debounceMs={250} />

Use a small debounce for free-text search and filter inputs. Pagination, selection, and explicit refreshes still use canonical transitions; component code does not manipulate query strings directly.

Multiple Tables

<>
  <InertiaX prop="active_users" />
  <InertiaX prop="audit_events" />
</>

The Laravel response must contain both distinct props. Do not reuse the same Table ID for two instances on one page.

Match adapter generations

Keep inertiajs/inertia-laravel and @inertiajs/react on the same major. Both Inertia 2 and 3 are supported as matched pairs. See Compatibility.