Juggling backend controllers and frontend state used to mean building a clunky API or wrestling with complex routing. The modern Laravel, Inertia.js, and React stack fixes this, but recent updates change how you write everyday code. If you want to keep your stack snappy without adding bloat, you need to know what just changed.

• How to defer slow database queries using Inertia lazy props
• How to use partial reloads to send only the data your React component needs
• Cleaner form handling with the updated React useForm hook

Deffer Slow Queries with Inertia Lazy Props

Loading heavy data on every page visit slows down your app. Inertia now makes it easy to defer non-essential data until the initial page render is complete, keeping your app feeling instant.

Here is how you loaded everything at once before:

// Before: All data loads on the initial request, slowing things down
public function show(User $user) {
    return Inertia::render('Users/Show', [
        'user' => $user,
        'analytics' => $user->getHeavyAnalytics(),
    ]);
}

Here is the new way using lazy evaluation so the main page loads instantly:

// After: Analytics are deferred until explicitly requested by the frontend
public function show(User $user) {
    return Inertia::render('Users/Show', [
        'user' => $user,
        'analytics' => Inertia::lazy(fn () => $user->getHeavyAnalytics()),
    ]);
}

The key takeaway is that your users see the user profile immediately, while the heavy analytics data fetches in the background.

Fetch Only What You Need with Partial Reloads

When a user updates a small piece of data, you rarely need to refresh the entire page state. Partial reloads let you ask the Laravel backend for just the specific props your React component cares about.

Here is how you trigger a partial reload on the React side:

// After: Only reload the 'notifications' prop from the controller
router.reload({ only: ['notifications'] });

This saves server CPU cycles and keeps your network tab clean.

Things to watch out for

The biggest mistake developers make with lazy props is forgetting to handle the loading state on the React frontend. Because deferred data is null on the initial render, your React components will crash if you try to read properties off an undefined object without a fallback check. Always use optional chaining or default values when rendering lazy props for the first time.

Open your main project terminal right now, run composer update and npm update, and try swapping one heavy controller property over to an Inertia lazy prop.