During hydration React 18 yields the main thread after every component renders to allow high priority events to process, improving page interaction performance.

However what I have found is on my site with a large amount of GTM tags and injected 3rd party scripts (GA tracking, dynatrace, tiktok etc) React is yielding the hydration to these 3rd parties as their scripts are getting injected into the page, and added to the call stack.

This is drastically delaying hydration of my site, and delaying client side loaded widgets from being rendered.

As this is a large enterprise E-commerce I have little control over the actual gtm scripts, and they are required to be loaded inline.

I really need a React API to allow me to enforce parts of my component tree as being high priority, and non interruptible during hydration. Does such a thing exist?

https://github.com/reactwg/react-18/discussions/38#discussioncomment-837161

I investigated the source code and there didn’t appear to be any options https://github.com/facebook/react/blob/5aa0c5671fdddc46092d46420fff84a82df558ac/packages/react-reconciler/src/ReactFiberWorkLoop.new.js#L1560-L1562