Add support for preload media to ReactDOM #28635

mariusc23 · 2024-03-25T21:18:15Z

Summary

This PR adds support for media option to ReactDOM.preload(), which is needed when images differ between screen sizes (for example mobile vs desktop).

Tests copied from #27129 (thanks @damnsamn!)

How did you test this change?

Ran the tests from #27129 before:

yarn test ReactDOMFloat

  ● ReactDOMFloat › should handle media on image preload

    expect(received).toEqual(expected) // deep equality

    - Expected  - 1
    + Received  + 0

    @@ -2,11 +2,10 @@
        <head>
          <link
            as="image"
            imagesizes="100vw"
            imagesrcset="/server"
    -       media="print and (min-width: 768px)"
            rel="preload"
          />
        </head>
        <body>
          hello

      4290 |       renderToPipeableStream(<App />).pipe(writable);
      4291 |     });
    > 4292 |     expect(getMeaningfulChildren(document)).toEqual(
           |                                             ^
      4293 |       <html>
      4294 |         <head>
      4295 |           <link

      at Object.<anonymous> (packages/react-dom/src/__tests__/ReactDOMFloat-test.js:4292:45)

After:

Test Suites: 1 passed, 1 total
Tests:       1 skipped, 109 passed, 110 total
Snapshots:   0 total
Time:        25.541 s
Ran all test suites matching /ReactDOMFloat/i.
✨  Done in 27.84s.

react-sizebot · 2024-03-25T21:23:21Z

Comparing: 5a75f9e...281a48c

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	+0.03%	176.93 kB	176.98 kB	+0.02%	54.95 kB	54.96 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.03%	173.36 kB	173.41 kB	+0.02%	54.08 kB	54.09 kB
facebook-www/ReactDOM-prod.classic.js	+0.01%	595.27 kB	595.34 kB	+0.01%	104.55 kB	104.56 kB
facebook-www/ReactDOM-prod.modern.js	+0.01%	578.53 kB	578.60 kB	+0.01%	101.57 kB	101.58 kB
test_utils/ReactAllWarnings.js	Deleted	65.49 kB	0.00 kB	Deleted	16.16 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-dom/cjs/react-dom.react-server.production.min.js	+1.75%	2.69 kB	2.74 kB	+1.38%	0.87 kB	0.88 kB
oss-stable-semver/react-dom/cjs/react-dom.react-server.production.min.js	+1.75%	2.69 kB	2.74 kB	+1.38%	0.87 kB	0.88 kB
oss-stable/react-dom/cjs/react-dom.react-server.production.min.js	+1.75%	2.69 kB	2.74 kB	+1.38%	0.87 kB	0.88 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+1.32%	3.64 kB	3.69 kB	+1.03%	1.27 kB	1.28 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+1.31%	3.67 kB	3.72 kB	+1.01%	1.29 kB	1.31 kB
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.production.min.js	+1.31%	3.68 kB	3.72 kB	+0.93%	1.29 kB	1.30 kB
oss-stable-semver/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+1.24%	3.78 kB	3.83 kB	+0.96%	1.36 kB	1.37 kB
oss-stable/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+1.23%	3.81 kB	3.85 kB	+0.79%	1.38 kB	1.40 kB
oss-experimental/react-dom/umd/react-dom-server-rendering-stub.production.min.js	+1.23%	3.81 kB	3.86 kB	+0.87%	1.38 kB	1.39 kB
oss-experimental/react-dom/cjs/react-dom.react-server.production.js	+1.19%	6.39 kB	6.47 kB	+0.93%	1.29 kB	1.30 kB
oss-stable-semver/react-dom/cjs/react-dom.react-server.production.js	+1.19%	6.39 kB	6.47 kB	+0.93%	1.29 kB	1.30 kB
oss-stable/react-dom/cjs/react-dom.react-server.production.js	+1.19%	6.39 kB	6.47 kB	+0.93%	1.29 kB	1.30 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.production.js	+0.83%	9.17 kB	9.25 kB	+0.57%	2.29 kB	2.31 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.production.js	+0.83%	9.20 kB	9.27 kB	+0.52%	2.32 kB	2.33 kB
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.production.js	+0.83%	9.20 kB	9.28 kB	+0.56%	2.32 kB	2.33 kB
oss-experimental/react-dom/cjs/react-dom.react-server.development.js	+0.52%	14.74 kB	14.81 kB	+0.42%	3.11 kB	3.12 kB
oss-stable-semver/react-dom/cjs/react-dom.react-server.development.js	+0.52%	14.74 kB	14.81 kB	+0.42%	3.11 kB	3.12 kB
oss-stable/react-dom/cjs/react-dom.react-server.development.js	+0.52%	14.74 kB	14.81 kB	+0.42%	3.11 kB	3.12 kB
oss-stable-semver/react-dom/cjs/react-dom-server-rendering-stub.development.js	+0.42%	17.95 kB	18.02 kB	+0.31%	4.17 kB	4.18 kB
oss-stable/react-dom/cjs/react-dom-server-rendering-stub.development.js	+0.42%	17.97 kB	18.05 kB	+0.29%	4.20 kB	4.21 kB
oss-experimental/react-dom/cjs/react-dom-server-rendering-stub.development.js	+0.42%	17.98 kB	18.06 kB	+0.31%	4.20 kB	4.21 kB
oss-stable-semver/react-dom/umd/react-dom-server-rendering-stub.development.js	+0.41%	18.86 kB	18.94 kB	+0.30%	4.29 kB	4.30 kB
oss-stable/react-dom/umd/react-dom-server-rendering-stub.development.js	+0.41%	18.89 kB	18.97 kB	+0.32%	4.32 kB	4.33 kB
oss-experimental/react-dom/umd/react-dom-server-rendering-stub.development.js	+0.41%	18.89 kB	18.97 kB	+0.32%	4.32 kB	4.33 kB
test_utils/ReactAllWarnings.js	Deleted	65.49 kB	0.00 kB	Deleted	16.16 kB	0.00 kB

Generated by 🚫 dangerJS against 281a48c

gnoff

TY

This PR adds support for `media` option to `ReactDOM.preload()`, which is needed when images differ between screen sizes (for example mobile vs desktop) DiffTrain build for [78328c0](78328c0)

This PR adds support for `media` option to `ReactDOM.preload()`, which is needed when images differ between screen sizes (for example mobile vs desktop)

markoleavy · 2024-08-09T11:56:36Z

This feature is still not available for react-dom 18.3.1. Will it be part of the 19's updates?

gnoff · 2024-08-09T14:47:35Z

These new APIs are part of the React 19 release and will not be available on any 18.x release. React 19 was originally intended to be released shortly after React conf but we decided to include a change to sibling rendering which has not landed yet but should soon

andershagbard · 2024-10-24T12:41:43Z

Can we have this released in 18? It's a fully backward compatible change

markoleavy · 2024-12-15T10:54:35Z

Looks like 'media' has not been added to the PreloadOption type on "@types/react-dom@19.0.2".
Still able to use it without linting errors with the spread hack

preload(
        "https://src",
        {
          as: "image",
          fetchPriority: "high",
          imageSizes: "100vw",
          imageSrcSet: "https://srcest",
          type: "image/webp",
          ...{ media: "screen and (orientation: portrait)" },
        }
      )

facebook-github-bot added the CLA Signed label Mar 25, 2024

mariusc23 changed the title ~~Add support for preload meadia to ReactDOM~~ Add support for preload media to ReactDOM Mar 25, 2024

mariusc23 force-pushed the add-preload-media branch from 614dea8 to e8bcaa8 Compare March 25, 2024 21:33

Add support for preload media to ReactDOM

281a48c

mariusc23 force-pushed the add-preload-media branch from e8bcaa8 to 281a48c Compare March 25, 2024 21:33

eps1lon requested a review from gnoff March 25, 2024 21:38

gnoff approved these changes Mar 28, 2024

View reviewed changes

gnoff merged commit 78328c0 into facebook:main Mar 28, 2024
38 checks passed

This was referenced Apr 24, 2024

Update React from c3048aab4 to cb151849e1 vercel/next.js#64994

Closed

Support React 19 in App and Pages router vercel/next.js#65058

Merged

eps1lon mentioned this pull request May 1, 2024

Add media option to ReactDOM.preload() #27129

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for preload media to ReactDOM #28635

Add support for preload media to ReactDOM #28635

mariusc23 commented Mar 25, 2024

react-sizebot commented Mar 25, 2024 •

edited

Loading

gnoff left a comment

markoleavy commented Aug 9, 2024

gnoff commented Aug 9, 2024

andershagbard commented Oct 24, 2024

markoleavy commented Dec 15, 2024 •

edited

Loading

Add support for preload media to ReactDOM #28635

Add support for preload media to ReactDOM #28635

Conversation

mariusc23 commented Mar 25, 2024

Summary

How did you test this change?

react-sizebot commented Mar 25, 2024 • edited Loading

Critical size changes

Significant size changes

gnoff left a comment

Choose a reason for hiding this comment

markoleavy commented Aug 9, 2024

gnoff commented Aug 9, 2024

andershagbard commented Oct 24, 2024

markoleavy commented Dec 15, 2024 • edited Loading

react-sizebot commented Mar 25, 2024 •

edited

Loading

markoleavy commented Dec 15, 2024 •

edited

Loading