Challenges with Rendering Sequence Using React.use and Await in Remix

[shatee]

Hi Remix Community,

I'm working on a Remix application and encountering a rendering sequence issue, both when using React 18.3's React.use and Remix's Await API for asynchronous data fetching. The issue involves:

• On page navigation, an id parameter updates as part of routing.
• Concurrently, an AsyncComponent attempts to fetch additional data, either using React.use or within an Await component.
• Expected behavior: The id updates first, then AsyncComponent renders, showing a "Loading..." state during data fetching.
• Actual behavior: id update and AsyncComponent rendering occur simultaneously, bypassing the "Loading..." state.

remix-sandbox.mov

Code for reference: https://github.com/shatee/remix-sandbox/blob/master/app/routes/poke.%24id.tsx

I am looking for insights on ensuring a sequential rendering process where the id updates occur first, followed by AsyncComponent displaying its loading state during data fetching. Any advice or suggestions on handling this with either React.use or Remix's Await API would be greatly appreciated.

Thanks in advance for your help!

[sergiodxa]

I don't think React.use is officially supported yet in Remix, and the Await component is intended to be used with defer responses, check https://remix.run/docs/en/main/guides/streaming

[shatee]

Thanks for your response and the information about defer.

Just to confirm, does using defer require resolving data within the loader?
My need is more towards having control at the component level for data fetching. It seems that defer is more loader-focused than what I'm aiming for.

I'll keep exploring and am open to any other suggestions. Looking forward to more insights.

[sergiodxa]

Yes, with defer the idea is you trigger the data fetching in the loader, but don't block the response, instead stream the result once it's completed, this helps makes pages load faster than if you triggered the data fetching in the component client side.

If you want to fetch client-side you can use useFetcher hook

[shatee]

I've resolved the issue by adding a key prop with the id to the page's root element. This ensures correct re-rendering for page transitions within the same entry point. Here's the commit for reference.

Thanks!