React 19 Bug: Unexpected Preload Link Injection!

Aug 16, 2025 by Kenji Nakamura 49 views

React 19 Bug: Unexpected `<link rel="preload">` Injection with `renderToString()`

Hey everyone! Let's dive into a quirky issue discovered in React 19 (version 19.1.1, to be precise). It seems like the renderToString() method is automatically injecting <link rel="preload"> tags for all <img> tags, which is... well, unexpected! This wasn't the behavior in React 18, and it's causing some head-scratching. So, let’s break down what's happening, why it's a bug, and what we expect instead.

The Mystery of the Auto-Injected Preload Links

So, the main issue here is that in React 19, when you use renderToString() to render a simple <img> tag on the server, React is automatically adding a <link rel="preload" as="image" href="..."/> tag to the output. This is quite a significant departure from how things worked in React 18. Essentially, React is trying to optimize image loading by telling the browser to start downloading the image before it even parses the <img> tag. While preloading is generally a great performance optimization technique, the problem is that this is happening automatically, without any explicit instruction from the developer. This can lead to unexpected behavior and potentially bloat the <head> of your HTML document with preload links you didn't ask for.

Diving Deep into the Code Snippet

Let's take a closer look at the code that exposes this behavior. Imagine you have a simple React component that renders an image. You might use renderToString() like this:

import { renderToString } from "react-dom/server";

let str = renderToString(<img src="my/image.png" />);
console.log(str);

Now, in React 18, you'd expect the output to be just a plain <img> tag:

<img src="my/image.png"/>

But in React 19, the output is:

<link rel="preload" as="image" href="my/image.png"/><img src="my/image.png"/>

See that <link rel="preload"> tag? It's being injected automatically. This is surprising because you haven't explicitly used the preload() API or any other mechanism to request a preload link. It’s like React is trying to be helpful but overstepping a bit.

Why Is This a Problem, Guys?

You might be thinking, "Okay, so React is preloading images. That's good, right?" Well, yes, preloading can be beneficial, but there are a few reasons why this automatic injection is problematic:

Unexpected Behavior: The biggest issue is that it's unexpected. Developers rely on React's documented behavior, and this automatic injection isn't documented anywhere. It violates the principle of least astonishment, making it harder to reason about your application's output.
Unnecessary Preload Links: Not all images need to be preloaded. Preloading everything can actually hurt performance by causing the browser to download resources that aren't immediately needed, potentially delaying the loading of critical resources. You should have fine-grained control over which images are preloaded.
HTML Bloat: Injecting preload links for every <img> tag can significantly increase the size of your HTML document, especially on pages with many images. This can negatively impact the initial page load time.
Potential Conflicts: In some cases, automatic preloading might conflict with other preloading strategies you're using, leading to unexpected behavior or performance issues.

Reproducing the Bug: Step-by-Step

Reproducing this bug is super straightforward. Here’s how you can see it in action:

Set up a React 19 project (or use the CodeSandbox link provided below).
Create a simple component that renders an <img> tag.
Use renderToString() from react-dom/server to render the component to a string.
Log the resulting string to the console.
Observe the output: you'll see the injected <link rel="preload"> tag.

You can even use this handy CodeSandbox to see it in action: React Preload Link Injection Bug

This CodeSandbox provides a live example that you can play with and confirm the bug for yourself. Just run the code, and you'll see the unexpected <link rel="preload"> tag in the output.

Current vs. Expected Behavior: A Clear Comparison

To reiterate, here's the difference between the current (buggy) behavior and the expected behavior:

Current Behavior (React 19.1.1)

When you render an <img> tag using renderToString(), React automatically injects a <link rel="preload"> tag for the image.

For example, the code:

<img src="my/image.png"/>

Produces the following HTML string:

<link rel="preload" as="image" href="my/image.png"/><img src="my/image.png"/>

Expected Behavior

When you render an <img> tag using renderToString(), React should only output the <img> tag itself, unless you explicitly request a preload link using the preload() API or another mechanism.

So, the expected output for the above code should be:

<img src="my/image.png"/>

This is how React 18 and earlier versions behaved, and it's the behavior that developers expect based on the documentation and the principle of explicit control.