Stacking Laravel, Inertia.js, and React gives you the speed of a monolith with the power of a single-page app. But keeping up with how these tools evolve can slow you down.

Let us look at the practical updates that actually change how you write code today.

• Lazy loading props in Inertia.js to speed up initial page loads.
• Using Laravel's new fluent routing methods to clean up controllers.
• Cleaner React state management with the latest hooks.

Lazy Loading Inertia Props

When a page loads heavy data, Inertia usually fetches everything at once. Now, you can defer heavy props so the initial HTML loads instantly.

Here is how you loaded everything together before:

// Before
public function show(User $user) {
    return Inertia::render('Users/Show', [
        'user' => $user,
        'analytics' => $this->heavyAnalytics($user),
    ]);
}

Here is the new way using lazy evaluation so analytics load only when needed:

// After
public function show(User $user) {
    return Inertia::render('Users/Show', [
        'user' => $user,
        'analytics' => Inertia::lazy(fn () => $this->heavyAnalytics($user)),
    ]);
}

The takeaway is that your users see the main page content much faster while secondary data loads in the background.

Streamlined React Form Handling

Handling form submissions in React used to require writing repetitive state handlers for every input. The updated Inertia React hooks handle input changes automatically.

Here is the old way of tracking form state manually:

// Before
const [email, setEmail] = useState('');
const handleSubmit = (e) => {
    e.preventDefault();
    Inertia.post('/login', { email });
};

Here is the new way using the built-in form helper:

// After
const { data, setData, post } = useForm({ email: '' });
const handleSubmit = (e) => {
    e.preventDefault();
    post('/login');
};

The takeaway is less boilerplate code and fewer chances for state bugs in your components.

Common mistakes

A common mistake with lazy loading Inertia props is forgetting to update your React component to handle undefined data while the prop is still loading. Always check if your deferred prop exists before calling array methods on it. Another pitfall is overusing lazy loading for tiny datasets, which just adds unnecessary network requests.

Clone one of your existing side projects today and try replacing a heavy controller load with an Inertia lazy prop.