From 9e71172bfd0886ef58b145f1ea6319dc158043ca Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Fri, 24 Apr 2026 12:43:03 +0100
Subject: [PATCH] perf(ui): memoize inline markdown rendering in Header
 description

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 packages/ui/src/components/Header/Header.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
index 07a9ec5ab7..3f17e35732 100644
--- a/packages/ui/src/components/Header/Header.tsx
+++ b/packages/ui/src/components/Header/Header.tsx
@@ -24,7 +24,7 @@ import { sanitizeUrl } from '@braintree/sanitize-url';
 import { Container } from '../Container';
 import { Lexer } from 'marked';
 import { Link } from '../Link';
-import { Fragment } from 'react';
+import { Fragment, useMemo } from 'react';
 
 /**
  * Parses inline Markdown links in a string and returns an array of React nodes.
@@ -65,6 +65,11 @@ export const Header = (props: HeaderProps) => {
     metadata,
   } = ownProps;
 
+  const descriptionNodes = useMemo(
+    () => (description ? renderInlineMarkdown(description) : null),
+    [description],
+  );
+
   return (
     <Container className={classes.root}>
       {tags && tags.length > 0 && (
@@ -123,7 +128,7 @@ export const Header = (props: HeaderProps) => {
           color="secondary"
           className={classes.description}
         >
-          {renderInlineMarkdown(description)}
+          {descriptionNodes}
         </Text>
       )}
       {metadata && metadata.length > 0 && (