[Float] treat `props.async` in Float consistent with the rest of react-dom (#26760)
Treat async (boolean prop) consistently with Float. Previously float checked if `props.async === true` (or not true) but the rest of react-dom considers anything truthy that isn't a function or symbol as `true`. This PR normalizes the Float behavior.
Josh Story committed
Apr 8, 2024 at 14:26 UTC
f62cf8c62052ae780d351090013f7155cf9a868c
1 file changed
+17
-7
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+17
-7
@@ -2417,9 +2417,15 @@ export function getResource(
2417
return null;
2418
}
2419
case 'script': {
2420
- if (typeof pendingProps.src === 'string' && pendingProps.async === true) {
2421
- const scriptProps: ScriptProps = pendingProps;
2422
- const key = getScriptKey(scriptProps.src);
2420
+ const async = pendingProps.async;
2421
+ const src = pendingProps.src;
2422
+ if (
2423
+ typeof src === 'string' &&
2424
+ async &&
2425
+ typeof async !== 'function' &&
2426
+ typeof async !== 'symbol'
2427
+ ) {
2428
+ const key = getScriptKey(src);
2429
const scripts = getResourcesFromRoot(resourceRoot).hoistableScripts;
2430
2431
let resource = scripts.get(key);
@@ -3065,16 +3071,20 @@ export function isHostHoistableType(
3071
}
3072
}
3073
case 'script': {
3074
+ const isAsync =
3075
+ props.async &&
3076
+ typeof props.async !== 'function' &&
3077
+ typeof props.async !== 'symbol';
3078
if (
3069
- props.async !== true ||
3079
+ !isAsync ||
3080
props.onLoad ||
3081
props.onError ||
3072
- typeof props.src !== 'string' ||
3073
- !props.src
3082
+ !props.src ||
3083
+ typeof props.src !== 'string'
3084
) {
3085
if (__DEV__) {
3086
if (outsideHostContainerContext) {
3077
- if (props.async !== true) {
3087
+ if (!isAsync) {
3088
console.error(
3089
'Cannot render a sync or defer <script> outside the main document without knowing its order.' +
3090
' Try adding async="" or moving it into the root <head> tag.',