[React 19] Different behaviors with `preload` method #30056

ahce · 2024-06-23T23:16:07Z

Summary

react & react-dom version: 19.0.0-rc-3563387fe3-20240621
node version: 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

const fs = require('node:fs');
const { createElement } = require('react');
const { preload, preinit } = require('react-dom');
const { renderToString } = require('react-dom/server');

const CSS = '/some.css';
const LINK_PROPS = {
  rel: 'stylesheet',
  href: CSS,
};

/**
 * Doesn't create the preload link tag
 */
const PreloadAndPreinit = () => {
  preload(CSS, { as: 'style' });
  preinit(CSS, { as: 'style' });

  return null;
};

/**
 * Doesn't create the preload link tag
 */
const PreloadAndLinkWithPrecedence = () => {
  preload(CSS, { as: 'style' });

  return createElement('link', { ...LINK_PROPS, precedence: 'custom' });
};

/**
 * Creates the preload link tag correctly into the head
 * The stylesheet link tag stays in the body, because it doesn't have precedence
 */
const PreloadAndLinkWithoutPrecedence = () => {
  preload(CSS, { as: 'style' });

  return createElement('link', LINK_PROPS);
};

/**
 * Moves both tags into the head
 */
const OnlyLinkTags = () => [
  createElement('link', {
    key: 'preload',
    rel: 'preload',
    as: 'style',
    href: CSS,
  }),
  createElement('link', { ...LINK_PROPS, key: 'link', precedence: 'custom' }),
];

[
  PreloadAndPreinit,
  PreloadAndLinkWithPrecedence,
  PreloadAndLinkWithoutPrecedence,
  OnlyLinkTags,
].forEach((Component) => {
  fs.writeFileSync(
    `_${Component.name}.html`,
    renderToString(
      createElement(
        'html',
        null,
        createElement('head'),
        createElement('body', null, createElement(Component)),
      ),
    ),
  );
});

Outputs:

PreloadAndPreinit:

Current:

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="default" />
  </head>
  <body></body>
</html>

Expected:

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="default" />
    <link rel="preload" as="style" href="/some.css" />
  </head>
  <body></body>
</html>

PreloadAndLinkWithPrecedence:

Current:

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="custom" />
  </head>
  <body></body>
</html>

Expected:

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="default" />
    <link rel="preload" as="style" href="/some.css" />
  </head>
  <body></body>
</html>

PreloadAndLinkWithoutPrecedence:

Current:

<html>
  <head>
    <link rel="preload" href="/some.css" as="style" />
  </head>
  <body>
    <link rel="stylesheet" href="/some.css" />
  </body>
</html>

Expected:

The same as current.

OnlyLinkTags:

Current:

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="custom" />
    <link rel="preload" as="style" href="/some.css" />
  </head>
  <body></body>
</html>

Expected:

The same as current.

The text was updated successfully, but these errors were encountered:

eps1lon · 2024-06-25T08:23:01Z

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.

ahce · 2024-06-25T21:40:04Z

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! 😃

ahce added the React 19 label Jun 23, 2024

eps1lon added the Resolution: Needs More Information label Jun 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[React 19] Different behaviors with `preload` method #30056

[React 19] Different behaviors with `preload` method #30056

ahce commented Jun 23, 2024 •

edited

Loading

eps1lon commented Jun 25, 2024

ahce commented Jun 25, 2024

[React 19] Different behaviors with preload method #30056

[React 19] Different behaviors with preload method #30056

Comments

ahce commented Jun 23, 2024 • edited Loading

Summary

Code example

Outputs:

PreloadAndPreinit:

PreloadAndLinkWithPrecedence:

PreloadAndLinkWithoutPrecedence:

OnlyLinkTags:

eps1lon commented Jun 25, 2024

ahce commented Jun 25, 2024

[React 19] Different behaviors with `preload` method #30056

[React 19] Different behaviors with `preload` method #30056

ahce commented Jun 23, 2024 •

edited

Loading