-
Notifications
You must be signed in to change notification settings - Fork 46.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[React 19] Different behaviors with preload
method
#30056
Comments
Thank you for the details. Could you include the expected behavior for each case? It's not clear at a glance which cases work as expected and which don't. |
Added expected behavior! 😃 |
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment! |
hi @ahce, the preload functions aren't a shortcut to rendering a preload tag. They are an instruction to react to inform it about a resource that will be used in the future that we can load early if we have the opportunity. When you call preload and then preinit React understands that the preload is for the same resource that the preinit is for and it chooses to emit the stylesheet itself rather than a preload of the stylesheet followed by the stylesheet. I'm not sure what your goal is with the preload tag + stylesheet tag but functionally the browser won't use it and it just increases the size of the intial HTML payload. Another reason React doesn't emit both is preloads don't always have the best prioritization. A preload link can get in the browsers way of optimizing which resources to fetch in what priority. Now in this case stylesheets have very high priority anyway so its sort of irrelevant but preloads for scripts for instance would likely accidentally bump up their priority relative to a script tag so if we're going to emit the script itself in the current flush we don't preload it too. The reason you see both tags when you render a regular stylesheet is that without So to sum up. the observe behavior is intended. A call to |
Summary
19.0.0-rc-3563387fe3-20240621
20.14.0
When using react's preload method, the preload link tag is not created in certain cases.
It works correctly with two link tags (
OnlyLinkTags
component).Code example
Outputs:
PreloadAndPreinit:
Current:
Expected:
PreloadAndLinkWithPrecedence:
Current:
Expected:
PreloadAndLinkWithoutPrecedence:
Current:
Expected:
The same as current.
OnlyLinkTags:
Current:
Expected:
The same as current.
The text was updated successfully, but these errors were encountered: