From dc6a7e01e1d2fa5eb4974f9bb66e9e8fb40f6ef8 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Wed, 10 Apr 2024 12:15:04 -0700
Subject: [PATCH] [Float] Don't preload images inside `<noscript>` (#28815)

`<noscript>` scopes should be considered inert from the perspective of
Fizz since we assume they'll only be used in rare and adverse
circumstances. When we added preload support for img tags we did not
include the noscript scope check in the opt-out for preloading. This
change adds it in

fixes: #27910
---
 .../src/server/ReactFizzConfigDOM.js          |  6 ++--
 .../src/__tests__/ReactDOMFloat-test.js       | 32 +++++++++++++++++++
 2 files changed, 35 insertions(+), 3 deletions(-)
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 91baeef4a1bff..f8989c18a4a8a 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -2762,7 +2762,7 @@ function pushImg(
   props: Object,
   resumableState: ResumableState,
   renderState: RenderState,
-  pictureTagInScope: boolean,
+  pictureOrNoScriptTagInScope: boolean,
 ): null {
   const {src, srcSet} = props;
   if (
@@ -2771,7 +2771,7 @@ function pushImg(
     (typeof src === 'string' || src == null) &&
     (typeof srcSet === 'string' || srcSet == null) &&
     props.fetchPriority !== 'low' &&
-    pictureTagInScope === false &&
+    pictureOrNoScriptTagInScope === false &&
     // We exclude data URIs in src and srcSet since these should not be preloaded
     !(
       typeof src === 'string' &&
@@ -3599,7 +3599,7 @@ export function pushStartInstance(
         props,
         resumableState,
         renderState,
-        !!(formatContext.tagScope & PICTURE_SCOPE),
+        !!(formatContext.tagScope & (PICTURE_SCOPE | NOSCRIPT_SCOPE)),
       );
     }
     // Omitted close tags
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index c71af838e65dd..3eabcb5781c29 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -4261,6 +4261,38 @@ body {
     );
   });
 
+  // Fixes: https://github.com/facebook/react/issues/27910
+  it('omits preloads for images inside noscript tags', async () => {
+    function App() {
+      return (
+        <html>
+          <body>
+            <img src="foo" />
+            <noscript>
+              <img src="bar" />
+            </noscript>
+          </body>
+        </html>
+      );
+    }
+
+    await act(() => {
+      renderToPipeableStream(<App />).pipe(writable);
+    });
+
+    expect(getMeaningfulChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="preload" href="foo" as="image" />
+        </head>
+        <body>
+          <img src="foo" />
+          <noscript>&lt;img src="bar"&gt;</noscript>
+        </body>
+      </html>,
+    );
+  });
+
   it('should handle media on image preload', async () => {
     function App({isClient}) {
       ReactDOM.preload('/server', {
