Repository: facebook/react
File: packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js (JavaScript)

Code before:
      // We consider whether this preload can be promoted to higher priority flushing queue.
      // The only time a resource will exist here is if it was created during this render
      // and was not already in the high priority queue.
      if (
        props.fetchPriority === 'high' ||
        renderState.highImagePreloads.size < 10
      ) {
        // Delete the resource from the map since we are promoting it and don't want to
        // reenter this branch in a second pass for duplicate img hrefs.
        promotablePreloads.delete(key);

        // $FlowFixMe - Flow should understand that this is a Resource if the condition was true
        renderState.highImagePreloads.add(resource);
      }
    } else if (!resumableState.imageResources.hasOwnProperty(key)) {
      // We must construct a new preload resource
      resumableState.imageResources[key] = PRELOAD_NO_CREDS;
      const crossOrigin = getCrossOriginString(props.crossOrigin);

      const headers = renderState.headers;
      let header;
      if (
        headers &&
        headers.remainingCapacity > 0 &&
        // browsers today don't support preloading responsive images from link headers so we bail out
        // if the img has srcset or sizes defined
        typeof props.srcSet !== 'string' &&
        // this is a hueristic similar to capping element preloads to 10 unless explicitly
        // fetchPriority="high". We use length here which means it will fit fewer images when
        // the urls are long and more when short. arguably byte size is a better hueristic because
        // it directly translates to how much we send down before content is actually seen.
        // We could unify the counts and also make it so the total is tracked regardless of
        // flushing output but since the headers are likely to be go earlier than content
        // they don't really conflict so for now I've kept them separate
        (props.fetchPriority === 'high' ||
          headers.highImagePreloads.length < 500) &&
        // We manually construct the options for the preload only from strings. We don't want to pollute
        // the params list with arbitrary props and if we copied everything over as it we might get
        // coercion errors. We have checks for this in Dev but it seems safer to just only accept values
        // that are strings
        ((header = getPreloadAsHeader(src, 'image', {
          imageSrcSet: props.srcSet,
          imageSizes: props.sizes,
          crossOrigin,
          integrity: props.integrity,
          nonce: props.nonce,
          type: props.type,
          fetchPriority: props.fetchPriority,
          referrerPolicy: props.refererPolicy,
        })),
        // We always consume the header length since once we find one header that doesn't fit

Review comment (suggestion):
```suggestion
        // if the img has srcset defined
```

Code after:
      // We consider whether this preload can be promoted to higher priority flushing queue.
      // The only time a resource will exist here is if it was created during this render
      // and was not already in the high priority queue.
      if (
        props.fetchPriority === 'high' ||
        renderState.highImagePreloads.size < 10
      ) {
        // Delete the resource from the map since we are promoting it and don't want to
        // reenter this branch in a second pass for duplicate img hrefs.
        promotablePreloads.delete(key);

        // $FlowFixMe - Flow should understand that this is a Resource if the condition was true
        renderState.highImagePreloads.add(resource);
      }
    } else if (!resumableState.imageResources.hasOwnProperty(key)) {
      // We must construct a new preload resource
      resumableState.imageResources[key] = PRELOAD_NO_CREDS;
      const crossOrigin = getCrossOriginString(props.crossOrigin);

      const headers = renderState.headers;
      let header;
      if (
        headers &&
        headers.remainingCapacity > 0 &&
        // browsers today don't support preloading responsive images from link headers so we bail out
        // if the img has srcset defined
        typeof props.srcSet !== 'string' &&
        // this is a hueristic similar to capping element preloads to 10 unless explicitly
        // fetchPriority="high". We use length here which means it will fit fewer images when
        // the urls are long and more when short. arguably byte size is a better hueristic because
        // it directly translates to how much we send down before content is actually seen.
        // We could unify the counts and also make it so the total is tracked regardless of
        // flushing output but since the headers are likely to be go earlier than content
        // they don't really conflict so for now I've kept them separate
        (props.fetchPriority === 'high' ||
          headers.highImagePreloads.length < 500) &&
        // We manually construct the options for the preload only from strings. We don't want to pollute
        // the params list with arbitrary props and if we copied everything over as it we might get
        // coercion errors. We have checks for this in Dev but it seems safer to just only accept values
        // that are strings
        ((header = getPreloadAsHeader(src, 'image', {
          imageSrcSet: props.srcSet,
          imageSizes: props.sizes,
          crossOrigin,
          integrity: props.integrity,
          nonce: props.nonce,
          type: props.type,
          fetchPriority: props.fetchPriority,
          referrerPolicy: props.refererPolicy,
        })),
        // We always consume the header length since once we find one header that doesn't fit