Version:

• @inertiajs/react version: 2.0.3

Describe the problem:

Currently, when using Deferred component in a page, if a navigation happens after the deferred props has loaded (e.g., a form submitting or another partial reload) the Deferred children component causes an error by trying to access the property.

My guess is: the new response overrides the page props, defining the deferred prop back to undefined, what leads to the error. Indeed, the Deferred component swap the children component with the fallback in these cases, but by this time, the children component has already tried to "read a property of undefined" and caused the error.

Indeed, using optional chaining to read the property from inside the children component (someProp?.map(...)) avoids the error and let Deferred bring back the fallback while it refetches the deferred prop.

Steps to reproduce:

If the page contains a Deferred component, a partial reload (triggered programmatically or by a form submission to a route that redirects back) can be enough to cause this error:

import { router, usePage, Deferred } from "@inertiajs/react"

export function Index() {
  function handleTriggerPartialReload() {
   router.get("/") // basically, a reload. Could even be a form submitting to a route that returns `redirect()->back()` 
 }

  return (
    <div>
      <Deferred data="users" fallback={<span>Loading...</span>}><DeferredUsers/></Deferred>
      <button onClick={handleTriggerPartialReload}>Trigger a partial reload</button>
    </div>
  )
}

export function DeferredUsers() {
  const props = usePage().props
  
  return (
    <div>
      {/* if it was props.users?.map instead, it wouldn't throw the error and the fallback would be shown again */}
      { props.users.map((user) => ( <span key={user.id}>{user.name}</span> )) }
    </div>
  )
}