Time slicing script loading in lazyOnLoad method 🛩️
#40190
Conversation
sanjaiyan-dev
requested review from
timneutkens,
ijjk,
shuding and
huozhi
as code owners
| window.addEventListener('load', () => { | ||
| requestIdleCallback(() => loadScript(props)) | ||
| requestIdleCallback(() => { | ||
| nextjsStartTransition(() => { | ||
| loadScript(props) | ||
| }) | ||
| }) | ||
| }) |
There was a problem hiding this comment.
Per React documents:
React.startTransitionlets you mark updates inside the provided callback as transitions.
However, calling loadScript will not trigger an "update" (loadScript will not cause a state update or trigger a re-render, as it manipulates DOM directly, bypassing React completely).
Besides, currently next/script component is not concurrent rendering safe at all (see #40025), and calling concurrent API will cause the component (and its children) to opt-in concurrent rendering. If you add startTransition inside next/script, you may trigger many hidden race conditions.
There was a problem hiding this comment.
Per React documents:
React.startTransitionlets you mark updates inside the provided callback as transitions.However, calling
loadScriptwill not trigger an "update" (loadScriptwill not cause a state update or triggers a re-render, as it manipulates DOM directly, bypassing React completely).Besides, currently
next/scriptcomponent is not concurrent rendering safe at all (see #40025), and calling concurrent API will cause the component (and its children) to opt-in concurrent rendering. If you addstartTransitioninsidenext/script, you may trigger many hidden race conditions.
Ohh ok & tks for explanation 💪🏽🤝
There was a problem hiding this comment.
Per React documents:
React.startTransitionlets you mark updates inside the provided callback as transitions.However, calling
loadScriptwill not trigger an "update" (loadScriptwill not cause a state update or trigger a re-render, as it manipulates DOM directly, bypassing React completely).Besides, currently
next/scriptcomponent is not concurrent rendering safe at all (see #40025), and calling concurrent API will cause the component (and its children) to opt-in concurrent rendering. If you addstartTransitioninsidenext/script, you may trigger many hidden race conditions.
#40191 can be implemented now ?
There was a problem hiding this comment.
Still no.
Per React documents:
React.startTransitionlets you mark updates inside the provided callback as transitions.However, calling
loadScriptwill not trigger an "update" (loadScriptwill not cause a state update or trigger a re-render, as it manipulates DOM directly, bypassing React completely).
There was a problem hiding this comment.
Closing per above discussion https://github.com/vercel/next.js/pull/40190/files#r962118916
Time slicing script loading in
lazyOnLoadmethod 🛩️Extremely sorry if I made any mistakes :(