From 5e85b500d1979342e770db9bceb91c8055dda2de Mon Sep 17 00:00:00 2001
From: Iago Espinoza <iago1501@gmail.com>
Date: Thu, 10 Sep 2026 17:58:34 -0300
Subject: [PATCH 1/2] perf: de-duplicate identical <script src> tags in Helmet

Multiple independently-mounted component instances (e.g. several
widgets on the same page) can each declare <Helmet><script src=...>
for the same external script (reCAPTCHA being the common case).
react-helmet has no built-in de-duplication for <script> tags, so
each duplicate becomes its own real network request.

This wraps react-helmet and drops exact-duplicate script src entries
(from either the script prop or JSX children) before they reach it,
client-side only -- SSR output is left untouched to avoid leaking
per-request state across the long-lived Node process.

Includes unit tests covering the dedupe behavior.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 CHANGELOG.md                    |   4 +
 react/__tests__/Helmet.test.tsx | 171 ++++++++++++++++++++++++++++++++
 react/components/Helmet.tsx     | 123 ++++++++++++++++++++++-
 3 files changed, 296 insertions(+), 2 deletions(-)
 create mode 100644 react/__tests__/Helmet.test.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f5035abc3..a64af5d2a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Changed
+
+- De-duplicate identical `<script src>` tags declared via `Helmet` on the client, so multiple independently-mounted component instances that request the same external script (e.g. reCAPTCHA) no longer trigger repeated network requests for it. SSR output is left untouched.
+
 ## [8.136.4] - 2026-09-10 [YANKED]
 
 ## [8.136.3] - 2026-09-09
diff --git a/react/__tests__/Helmet.test.tsx b/react/__tests__/Helmet.test.tsx
new file mode 100644
index 000000000..f0c247135
--- /dev/null
+++ b/react/__tests__/Helmet.test.tsx
@@ -0,0 +1,171 @@
+import React from 'react'
+import { render, cleanup } from '@vtex/test-tools/react'
+
+// We don't rely on `react-helmet`'s actual DOM side effects here (they
+// require a real `canUseDOM` client environment that this jsdom test
+// setup doesn't provide). Instead we mock `react-helmet`'s `Helmet` with
+// a component that just records the props/children it receives, so we
+// can assert on exactly what our wrapper decided to forward -- which is
+// the whole surface of the de-duplication logic we're testing.
+let lastRenderedProps: any = null
+
+jest.mock('react-helmet', () => ({
+  Helmet: (props: any) => {
+    lastRenderedProps = props
+    return null
+  },
+}))
+
+// `Helmet` keeps a module-scoped `Set` of already-requested script `src`
+// values so de-duplication survives across independently-mounted
+// component instances (that's the whole point of the feature). Because
+// that state lives at module scope, it persists across tests unless we
+// force a fresh module instance every time.
+const loadHelmet = (): typeof import('../components/Helmet').default => {
+  jest.resetModules()
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  return require('../components/Helmet').default
+}
+
+const renderedScriptSrcs = () =>
+  (lastRenderedProps?.script ?? [])
+    .filter((script: any) => script && typeof script.src === 'string')
+    .map((script: any) => script.src)
+
+const renderedChildScriptSrcs = () =>
+  React.Children.toArray(lastRenderedProps?.children)
+    .filter(
+      (child: any) =>
+        React.isValidElement(child) &&
+        (child as any).type === 'script' &&
+        typeof (child as any).props?.src === 'string'
+    )
+    .map((child: any) => (child as any).props.src)
+
+beforeEach(() => {
+  lastRenderedProps = null
+})
+
+afterEach(() => {
+  cleanup()
+})
+
+it('forwards a single script src through unchanged', () => {
+  const Helmet = loadHelmet()
+
+  render(<Helmet script={[{ src: 'https://example.com/a.js' }]} />)
+
+  expect(renderedScriptSrcs()).toEqual(['https://example.com/a.js'])
+})
+
+it('drops duplicate script srcs passed via the `script` prop', () => {
+  const Helmet = loadHelmet()
+
+  render(
+    <Helmet
+      script={[
+        { src: 'https://example.com/a.js' },
+        { src: 'https://example.com/a.js' },
+        { src: 'https://example.com/b.js' },
+      ]}
+    />
+  )
+
+  expect(renderedScriptSrcs()).toEqual([
+    'https://example.com/a.js',
+    'https://example.com/b.js',
+  ])
+})
+
+it('drops duplicate script srcs passed as JSX children', () => {
+  const Helmet = loadHelmet()
+
+  render(
+    <Helmet>
+      <script src="https://example.com/a.js" />
+      <script src="https://example.com/a.js" />
+      <script src="https://example.com/b.js" />
+    </Helmet>
+  )
+
+  expect(renderedChildScriptSrcs()).toEqual([
+    'https://example.com/a.js',
+    'https://example.com/b.js',
+  ])
+})
+
+it('dedupes a script src across the `script` prop and JSX children of the same instance', () => {
+  const Helmet = loadHelmet()
+
+  render(
+    <Helmet script={[{ src: 'https://example.com/a.js' }]}>
+      <script src="https://example.com/a.js" />
+    </Helmet>
+  )
+
+  // The `script` prop is processed first, so it wins; the duplicate from
+  // children is dropped.
+  expect(renderedScriptSrcs()).toEqual(['https://example.com/a.js'])
+  expect(renderedChildScriptSrcs()).toEqual([])
+})
+
+it('drops duplicates across independently-mounted instances', () => {
+  const Helmet = loadHelmet()
+
+  render(<Helmet script={[{ src: 'https://example.com/a.js' }]} />)
+
+  expect(renderedScriptSrcs()).toEqual(['https://example.com/a.js'])
+
+  cleanup()
+
+  // A second, independent mount (e.g. another instance of the same
+  // widget elsewhere on the page) requesting the exact same src should
+  // have it dropped, because the module-scoped registry remembers it was
+  // already requested.
+  render(<Helmet script={[{ src: 'https://example.com/a.js' }]} />)
+
+  expect(renderedScriptSrcs()).toEqual([])
+})
+
+it('does not dedupe scripts without a src (inline scripts)', () => {
+  const Helmet = loadHelmet()
+
+  render(
+    <Helmet
+      script={[{ innerHTML: 'window.a = 1' }, { innerHTML: 'window.a = 1' }]}
+    />
+  )
+
+  expect(lastRenderedProps.script).toEqual([
+    { innerHTML: 'window.a = 1' },
+    { innerHTML: 'window.a = 1' },
+  ])
+})
+
+it('leaves non-script children and other props untouched', () => {
+  const Helmet = loadHelmet()
+
+  render(
+    <Helmet title="my title">
+      <meta name="description" content="desc" />
+    </Helmet>
+  )
+
+  expect(lastRenderedProps.title).toBe('my title')
+  expect(React.Children.toArray(lastRenderedProps.children)).toHaveLength(1)
+})
+
+it('starts each fresh module instance with an empty registry', () => {
+  const FirstHelmet = loadHelmet()
+
+  render(<FirstHelmet script={[{ src: 'https://example.com/a.js' }]} />)
+  expect(renderedScriptSrcs()).toEqual(['https://example.com/a.js'])
+  cleanup()
+
+  // Sanity check for the test helper itself: a fresh module (as if the
+  // page had reloaded) must not remember the previous instance's src.
+  const SecondHelmet = loadHelmet()
+
+  render(<SecondHelmet script={[{ src: 'https://example.com/a.js' }]} />)
+  expect(renderedScriptSrcs()).toEqual(['https://example.com/a.js'])
+})
diff --git a/react/components/Helmet.tsx b/react/components/Helmet.tsx
index 94063efb5..0fe32017b 100644
--- a/react/components/Helmet.tsx
+++ b/react/components/Helmet.tsx
@@ -1,4 +1,123 @@
-import { Helmet } from 'react-helmet'
+// NOTE: using plain (non-`import type`) imports for the type-only names
+// below (`ReactNode`, `HelmetProps`) is intentional -- the project's
+// installed `babel-preset-react-app` (7.0.2) doesn't support the
+// `import type { ... }` syntax and jest fails to parse it.
+import React, { Children, isValidElement, ReactNode } from 'react'
+import { Helmet as ReactHelmet, HelmetProps } from 'react-helmet'
+
+/**
+ * `<script src>` tags are idempotent for the lifetime of a single page
+ * load: once a given URL has been requested, its side effects (e.g. a
+ * global like `window.grecaptcha`) persist for as long as the page is
+ * open, so there's never a reason to request the exact same `src` a
+ * second time on the client -- even if the component that first
+ * requested it later unmounts, or a different, unrelated component
+ * requests it again.
+ *
+ * In practice, multiple independently-mounted components (e.g. several
+ * instances of the same provider/widget on one page) can each declare
+ * `<Helmet><script src="..." /></Helmet>` for the same external script.
+ * `react-helmet` has no built-in de-duplication for `<script>` tags (only
+ * `title`/`base` are singletons, and `meta`/`link` dedupe by specific
+ * attributes) -- it just concatenates every mounted `<Helmet>` instance's
+ * tags, so each duplicate becomes its own real network request.
+ *
+ * This wrapper drops exact-duplicate `<script src>` entries (from either
+ * the `script` prop or JSX children) before they ever reach `react-helmet`,
+ * so only the first request for a given URL is ever rendered into the DOM.
+ *
+ * This is intentionally client-only. Registering "already requested"
+ * state at module scope would leak across unrelated requests during
+ * server-side rendering (a long-lived Node process renders many
+ * different users' pages), so SSR output is left completely untouched --
+ * only the client, which gets a fresh JS context on every page load, gets
+ * de-duplication.
+ *
+ * NOTE on how "client-only" is detected: `react-helmet`'s own exported
+ * `Helmet.canUseDOM` static is, in the installed version, a *write-only*
+ * accessor (it only has a `set`, used so tests can force server-mode
+ * rendering under jsdom) -- reading it back always yields `undefined`,
+ * never a real boolean. Relying on `ReactHelmet.canUseDOM` as a read
+ * would therefore make this de-duplication a permanent no-op on every
+ * environment, including the client, which would silently defeat the
+ * whole point of this change. Instead we replicate, inline, the exact
+ * same environment check that `react-helmet` (via `react-side-effect`
+ * and `exenv`) uses *internally* to seed that same flag in the first
+ * place: `typeof window !== 'undefined' && window.document &&
+ * window.document.createElement`. This is computed once, at module
+ * load, exactly like the flag it mirrors.
+ */
+const isClient = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+)
+
+const requestedScriptSrcs: Set<string> | null = isClient ? new Set() : null
+
+function hasSrc(value: unknown): value is { src: string } {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    typeof (value as { src?: unknown }).src === 'string'
+  )
+}
+
+function shouldKeepSrc(src: string): boolean {
+  if (!requestedScriptSrcs) {
+    return true
+  }
+
+  if (requestedScriptSrcs.has(src)) {
+    return false
+  }
+
+  requestedScriptSrcs.add(src)
+
+  return true
+}
+
+function dedupeScriptArray(
+  scripts: HelmetProps['script']
+): HelmetProps['script'] {
+  if (!scripts || !requestedScriptSrcs) {
+    return scripts
+  }
+
+  return scripts.filter(
+    (script) => !hasSrc(script) || shouldKeepSrc(script.src)
+  )
+}
+
+function dedupeScriptChildren(children: ReactNode): ReactNode {
+  if (!requestedScriptSrcs) {
+    return children
+  }
+
+  return Children.map(children, (child) => {
+    if (
+      !isValidElement(child) ||
+      child.type !== 'script' ||
+      !hasSrc(child.props)
+    ) {
+      return child
+    }
+
+    return shouldKeepSrc(child.props.src) ? child : null
+  })
+}
+
+type Props = React.PropsWithChildren<HelmetProps>
+
+const Helmet = ({ children, script, ...rest }: Props) => (
+  <ReactHelmet {...rest} script={dedupeScriptArray(script)}>
+    {dedupeScriptChildren(children)}
+  </ReactHelmet>
+)
+
+Helmet.peek = ReactHelmet.peek
+Helmet.rewind = ReactHelmet.rewind
+Helmet.renderStatic = ReactHelmet.renderStatic
+Helmet.canUseDOM = ReactHelmet.canUseDOM
 
-// We need this indirection so its types are exported
 export default Helmet

From b45e2d4392a45c3ee5b931d88a149944d0066410 Mon Sep 17 00:00:00 2001
From: Iago Espinoza <iago1501@gmail.com>
Date: Thu, 10 Sep 2026 22:43:55 -0300
Subject: [PATCH 2/2] perf: stop hydration from re-executing server-rendered
 Helmet scripts

The <script src> dedupe added in the previous commit only sees duplicates
that coexist in a single render pass. It misses a second, more common
duplication that is separated in time:

  1. the server renders <script src="..."> into <head> and the browser
     requests and executes it while parsing the document;
  2. on the first client commit the component that declared the script
     often hasn't mounted yet (it lives behind a lazily-loaded chunk), so
     react-helmet sees one of its own tags that nothing in the tree
     claims and removes it;
  3. a commit later the component mounts, react-helmet no longer finds
     the tag and appends a byte-identical one -- and a freshly inserted
     <script> always executes.

Measured on storetheme.vtex.com by instrumenting appendChild/removeChild
from before page load: react-helmet removes the server-rendered
reCAPTCHA loader and re-appends a node-equal copy ~30ms later, in a
different commit, on roughly half of the loads (3 of 6 sampled, in both
production and a workspace running the dedupe). Each extra execution
registers another reCAPTCHA widget: two badges, two anchor iframes and
two parses of Google's ~340 KiB recaptcha__en.js, which together account
for ~71% of the page's unused JavaScript and a tail of long tasks that
keeps resetting Lighthouse's quiet-window requirement for TTI.

Seeding the module-scoped registry from the server-rendered tags at
module load makes step 3 a no-op. Dropping their `data-react-helmet`
attribute also makes react-helmet ignore them entirely, so step 2 never
happens either and the tag stays in the DOM where the server put it.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 CHANGELOG.md                    |   1 +
 react/__tests__/Helmet.test.tsx | 100 ++++++++++++++++++++++++++++++++
 react/components/Helmet.tsx     |  71 +++++++++++++++++++++++
 3 files changed, 172 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a64af5d2a..37042d237 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Changed
 
 - De-duplicate identical `<script src>` tags declared via `Helmet` on the client, so multiple independently-mounted component instances that request the same external script (e.g. reCAPTCHA) no longer trigger repeated network requests for it. SSR output is left untouched.
+- Adopt the `<script src>` tags `Helmet` already rendered server-side, so hydration can no longer remove and re-insert them. A re-inserted `<script>` is always executed again, which made external scripts run twice on part of the page loads -- for reCAPTCHA that meant a second widget being registered, each one downloading and executing its own copy of Google's ~340 KiB loader and polling the main thread for the rest of the page's life.
 
 ## [8.136.4] - 2026-09-10 [YANKED]
 
diff --git a/react/__tests__/Helmet.test.tsx b/react/__tests__/Helmet.test.tsx
index f0c247135..f76fdf2cc 100644
--- a/react/__tests__/Helmet.test.tsx
+++ b/react/__tests__/Helmet.test.tsx
@@ -42,8 +42,17 @@ const renderedChildScriptSrcs = () =>
     )
     .map((child: any) => (child as any).props.src)
 
+// Simulates the head `react-helmet` leaves behind after a server render:
+// its tags are marked with `data-react-helmet` and, for scripts with a
+// `src`, the browser has already requested and executed them by the time
+// the runtime bundle evaluates.
+const givenServerRenderedHead = (html: string) => {
+  document.head.innerHTML = html
+}
+
 beforeEach(() => {
   lastRenderedProps = null
+  document.head.innerHTML = ''
 })
 
 afterEach(() => {
@@ -155,6 +164,97 @@ it('leaves non-script children and other props untouched', () => {
   expect(React.Children.toArray(lastRenderedProps.children)).toHaveLength(1)
 })
 
+it('drops a script src that was already server-rendered', () => {
+  givenServerRenderedHead(
+    '<script data-react-helmet="true" src="https://example.com/a.js"></script>'
+  )
+
+  const Helmet = loadHelmet()
+
+  // This is the hydration case: the component that declared the script
+  // mounts on the client, but the browser already ran the server-rendered
+  // tag, so forwarding it to react-helmet would make it execute twice.
+  render(<Helmet script={[{ src: 'https://example.com/a.js' }]} />)
+
+  expect(renderedScriptSrcs()).toEqual([])
+})
+
+it('drops a server-rendered script src declared as a JSX child', () => {
+  givenServerRenderedHead(
+    '<script data-react-helmet="true" src="https://example.com/a.js"></script>'
+  )
+
+  const Helmet = loadHelmet()
+
+  render(
+    <Helmet>
+      <script src="https://example.com/a.js" />
+    </Helmet>
+  )
+
+  expect(renderedChildScriptSrcs()).toEqual([])
+})
+
+it('makes react-helmet ignore the adopted tags so they are never removed', () => {
+  givenServerRenderedHead(
+    '<script data-react-helmet="true" src="https://example.com/a.js"></script>'
+  )
+
+  loadHelmet()
+
+  // Without `data-react-helmet`, react-helmet no longer recognizes the tag
+  // as its own, so it won't remove it during its first DOM sync -- the tag
+  // stays exactly where the server put it.
+  expect(document.head.querySelectorAll('script[src]')).toHaveLength(1)
+  expect(
+    document.head.querySelectorAll('script[src][data-react-helmet]')
+  ).toHaveLength(0)
+})
+
+it('only adopts server-rendered scripts that have a src', () => {
+  givenServerRenderedHead(
+    '<script data-react-helmet="true">window.a = 1</script>'
+  )
+
+  const Helmet = loadHelmet()
+
+  render(<Helmet script={[{ src: 'https://example.com/a.js' }]} />)
+
+  expect(renderedScriptSrcs()).toEqual(['https://example.com/a.js'])
+})
+
+it('does not adopt scripts that react-helmet did not render', () => {
+  givenServerRenderedHead('<script src="https://example.com/a.js"></script>')
+
+  const Helmet = loadHelmet()
+
+  // A script the page put in the head by itself isn't react-helmet's to
+  // manage, so react-helmet won't remove/re-add it and there's nothing to
+  // de-duplicate against.
+  render(<Helmet script={[{ src: 'https://example.com/a.js' }]} />)
+
+  expect(renderedScriptSrcs()).toEqual(['https://example.com/a.js'])
+})
+
+it('still forwards scripts that were not server-rendered', () => {
+  givenServerRenderedHead(
+    '<script data-react-helmet="true" src="https://example.com/a.js"></script>'
+  )
+
+  const Helmet = loadHelmet()
+
+  render(
+    <Helmet
+      script={[
+        { src: 'https://example.com/a.js' },
+        { src: 'https://example.com/b.js' },
+      ]}
+    />
+  )
+
+  expect(renderedScriptSrcs()).toEqual(['https://example.com/b.js'])
+})
+
 it('starts each fresh module instance with an empty registry', () => {
   const FirstHelmet = loadHelmet()
 
diff --git a/react/components/Helmet.tsx b/react/components/Helmet.tsx
index 0fe32017b..6162204b2 100644
--- a/react/components/Helmet.tsx
+++ b/react/components/Helmet.tsx
@@ -25,6 +25,8 @@ import { Helmet as ReactHelmet, HelmetProps } from 'react-helmet'
  * This wrapper drops exact-duplicate `<script src>` entries (from either
  * the `script` prop or JSX children) before they ever reach `react-helmet`,
  * so only the first request for a given URL is ever rendered into the DOM.
+ * It also adopts the scripts `react-helmet` already emitted server-side, so
+ * hydration can't re-request them -- see `adoptServerRenderedScripts` below.
  *
  * This is intentionally client-only. Registering "already requested"
  * state at module scope would leak across unrelated requests during
@@ -55,6 +57,75 @@ const isClient = !!(
 
 const requestedScriptSrcs: Set<string> | null = isClient ? new Set() : null
 
+/**
+ * Adopts the `<script src>` tags that `react-helmet` already emitted into
+ * the server-rendered HTML, so the client never re-requests them.
+ *
+ * This handles a duplication that the in-render de-duplication above
+ * cannot see, because the two copies never coexist in a single render
+ * pass -- they're separated in *time*:
+ *
+ *  1. The server renders `<script src="...">` into `<head>`. The browser
+ *     requests and executes it while parsing the document.
+ *  2. On the first client commit, the component that declared that script
+ *     may not have mounted yet (it commonly lives behind a lazily-loaded
+ *     chunk). `react-helmet` therefore sees a tag of its own in the DOM
+ *     that nothing in the current tree claims, and removes it.
+ *  3. A commit later the component mounts, `react-helmet` no longer finds
+ *     the tag it just removed, and appends a brand-new -- byte-identical
+ *     -- one. A freshly inserted `<script>` element *always* executes, so
+ *     the external script runs a second time.
+ *
+ * A script running twice is not just a wasted request (the second one is
+ * usually served from cache anyway): it's a second full parse/execute of
+ * the payload, and for anything that registers global state on load it
+ * also means a duplicated instance. reCAPTCHA is the pathological case --
+ * every extra execution of its loader registers another widget, each of
+ * which pulls its own ~340 KiB of Google-internal code and keeps polling
+ * the main thread for the rest of the page's life.
+ *
+ * Because the registry lives at module scope, seeding it here (before
+ * `react-helmet` has had a chance to run its first DOM sync) is enough to
+ * make step 3 a no-op: by the time the component finally mounts, its
+ * `src` is already known to have been requested, so it never reaches
+ * `react-helmet` and no new tag is ever created.
+ *
+ * We also drop `data-react-helmet` from the adopted tags. That attribute
+ * is how `react-helmet` recognizes the tags it owns, so removing it makes
+ * it ignore them entirely -- meaning step 2 doesn't happen either and the
+ * tag simply stays in the DOM exactly where the server put it, instead of
+ * being removed and never restored.
+ *
+ * Note this runs at module load, which on the client happens while the
+ * runtime bundle evaluates -- the bundle's `<script>` tags sit at the end
+ * of `<body>`, so the whole `<head>` (and with it every server-rendered
+ * `react-helmet` tag) is already parsed and present by then.
+ */
+function adoptServerRenderedScripts() {
+  if (!requestedScriptSrcs) {
+    return
+  }
+
+  const serverRendered = document.querySelectorAll(
+    'script[data-react-helmet][src]'
+  )
+
+  for (let i = 0; i < serverRendered.length; i++) {
+    const script = serverRendered[i]
+    // The raw attribute (rather than the resolved `.src` property) is what
+    // we want here: it's the same string the app authored, which is what
+    // the incoming props will be compared against.
+    const src = script.getAttribute('src')
+
+    if (src) {
+      requestedScriptSrcs.add(src)
+      script.removeAttribute('data-react-helmet')
+    }
+  }
+}
+
+adoptServerRenderedScripts()
+
 function hasSrc(value: unknown): value is { src: string } {
   return (
     typeof value === 'object' &&