How performance will impact with react relay if we use loadQuery and usePreloadedQuery vs loadQuery and useLazyLoadQuery hook?

Question

1. loadQuery and usePreloadedQuery - This combination will actually be performant because we are using reference returned by loadQuery in the usePreloadedQuery hook so this follows the "render-as-you-fetch" pattern.
2. loadQuery and useLazyLoadQuery - If we use this combination then also it is giving the same performance as that of 1st combination. According to documentation we should use usePreloadedQuery query hook with loadQuery. When we useLazyLoadQuery with loadQuery then it does not make an additional API call because it uses the same data which we fetched from loadQuery.

So practically both ways are same or different? In terms of good architecture what should be the preferred way and why?

Answer 1

usePreloadedQuery sends the request while the component is rendering, and can suspend with a loading state if the component is ready before the query returns.

On the other hand useLazyLoadQuery sends the request after the component has rendered.

Because API requests generally take longer than React renders, it is better to start fetching as early as possible. Using prefetching with React.Suspense also improves user experience, because they won't see the component rendering nothing or an empty initial state before becoming populated with data.