From c9037f523820406831aa687bab39be687c1ae802 Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Thu, 27 Nov 2025 12:12:18 +0530 Subject: [PATCH 1/4] feat: Optimize StaticHtml component for React js Refactors the StaticHtml component to use React.memo for efficient static HTML rendering, improving performance and compatibility. --- packages/integrations/react/src/static-html.ts | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/integrations/react/src/static-html.ts b/packages/integrations/react/src/static-html.ts index 39facf5fefaa..e5adc1c77dbd 100644 --- a/packages/integrations/react/src/static-html.ts +++ b/packages/integrations/react/src/static-html.ts @@ -1,4 +1,4 @@ -import { createElement as h } from 'react'; +import { createElement as h, memo } from 'react'; /** * Astro passes `children` as a string of HTML, so we need @@ -26,12 +26,10 @@ const StaticHtml = ({ }; /** - * This tells React to opt-out of re-rendering this subtree, - * In addition to being a performance optimization, - * this also allows other frameworks to attach to `children`. - * - * See https://preactjs.com/guide/v8/external-dom-mutations + * React.memo is the modern functional equivalent of shouldComponentUpdate. + * + * By returning `true` in the comparison function (the second argument), + * we tell React that the props are "equal" and it should skip re-rendering, + * effectively making this subtree static. */ -StaticHtml.shouldComponentUpdate = () => false; - -export default StaticHtml; +export default memo(StaticHtml, () => true); From b39a4f94faae55902c369d833abc167e9d9c41f5 Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Thu, 4 Dec 2025 17:23:36 +0000 Subject: [PATCH 2/4] =?UTF-8?q?Add=20Changset=20=F0=9F=8C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/tough-days-sell.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tough-days-sell.md diff --git a/.changeset/tough-days-sell.md b/.changeset/tough-days-sell.md new file mode 100644 index 000000000000..86bca35a7292 --- /dev/null +++ b/.changeset/tough-days-sell.md @@ -0,0 +1,5 @@ +--- +'@astrojs/react': major +--- + +Fix StaticHtml performance by implementing `React.memo` for proper re-render prevention. From c1ef2d688ab9f5ab112aadb1a0ee6e919e587569 Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Wed, 4 Feb 2026 22:36:38 +0530 Subject: [PATCH 3/4] Update .changeset/tough-days-sell.md Co-authored-by: Florian Lefebvre --- .changeset/tough-days-sell.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/tough-days-sell.md b/.changeset/tough-days-sell.md index 86bca35a7292..377076b4faa3 100644 --- a/.changeset/tough-days-sell.md +++ b/.changeset/tough-days-sell.md @@ -1,5 +1,5 @@ --- -'@astrojs/react': major +'@astrojs/react': patch --- -Fix StaticHtml performance by implementing `React.memo` for proper re-render prevention. +Improves rendering of static HTML From 1022279698100aca09306d699e9d2b3a4c1b1d83 Mon Sep 17 00:00:00 2001 From: Sanjaiyan Parthipan Date: Mon, 16 Feb 2026 20:58:10 +0530 Subject: [PATCH 4/4] Update .changeset/tough-days-sell.md More detailed changeset. Co-authored-by: Sarah Rainsberger <5098874+sarah11918@users.noreply.github.com> --- .changeset/tough-days-sell.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tough-days-sell.md b/.changeset/tough-days-sell.md index 377076b4faa3..61f5142b6c28 100644 --- a/.changeset/tough-days-sell.md +++ b/.changeset/tough-days-sell.md @@ -2,4 +2,4 @@ '@astrojs/react': patch --- -Improves rendering of static HTML +Refactors to improve the performance of rendering static HTML content in React