What's the behaviour of defer and why should I use it?

[WorldSEnder]

What does using defer actually do? It seems that just returning objects that contain Promises from the loader enables the same use cases as using defer. My question thus is, what is the difference between the following two loaders?

const someLoader = () => {
  return { users: fetch("/api/userList") }
}
const someDeferredLoader = () => {
  return defer({ users: fetch("/api/userList") })
}

Both of these loaders seem to be usable interchangeably in the component, and I haven't found out how they differ:

export default function UserList() {
  const { users } = useLoaderData();
  return (
      <React.Suspense
        fallback={<p>Loading users...</p>}
      >
        <Await
          resolve={users}
          errorElement={
            <p>Error loading users!</p>
          }
        >
          {(users) => (
            <p>User list...</p>
          )}
        </Await>
      </React.Suspense>
  )
}

[kevinfairclough]

Yeah i'm baffled also

[brophdawg11]

The underlying technical difference is largely negligible and you can mostly just ignore defer in React Router client-side only SPA's. It's required in Remix (until the single fetch feature lands) as a way to tell us that we need to serialize a promise over the wire - but in RR SPA's there's no "over the wire" so a raw promise works just fine.

Basically, the functional difference is that defer wraps the promises so that if they resolve before we render, we can avoid an unnecessary additional render pass.

With a raw promise, at render time we have no way to know if the promise has already been resolved, so when your component renders we have to hook onto .then and throw data.users from Await to let it bubble up to Suspense, which will re-render on resolution, which will be in the next tick.

With defer we can hook on a .then ahead of time and avoid throwing the promise if it has already resolved by the time we render the component.

We will very likely be deprecating defer in v7 since it's no longer needed in Remix with Single Fetch.

[johot]

Thank you @brophdawg11! I too was baffled about this! I can now happily remove my defer usage in my RR project 🥳