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

@@ -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 && (