Merge pull request #1925 from okta/jk/OKTA-634603

feat: memoize Box and Typography
okta · Aug 18, 2023 · 5591ba2 · 5591ba2
2 parents ed59b29 + 03b5b20
commit 5591ba2
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 26 deletions.
diff --git a/packages/odyssey-react-mui/src/Box.tsx b/packages/odyssey-react-mui/src/Box.tsx
@@ -11,7 +11,7 @@
  */
 
 import { Box as MuiBox, BoxProps as MuiBoxProps } from "@mui/material";
-import { ReactNode, forwardRef } from "react";
+import { ReactNode, forwardRef, memo } from "react";
 
 export type BoxProps = {
   children?: ReactNode;
@@ -20,7 +20,7 @@ export type BoxProps = {
   sx?: MuiBoxProps["sx"];
 };
 
-export const Box = forwardRef<HTMLElement, BoxProps>(
+const Box = forwardRef<HTMLElement, BoxProps>(
   ({ children, component, id, sx }, ref) => (
     <MuiBox
       ref={ref}
@@ -32,4 +32,7 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
   )
 );
 
-Box.displayName = "Box";
+const MemoizedBox = memo(Box);
+MemoizedBox.displayName = "Box";
+
+export { MemoizedBox as Box };
diff --git a/packages/odyssey-react-mui/src/Typography.tsx b/packages/odyssey-react-mui/src/Typography.tsx
@@ -14,7 +14,7 @@ import {
   Typography as MuiTypography,
   TypographyProps as MuiTypographyProps,
 } from "@mui/material";
-import { ElementType, ReactNode, useMemo } from "react";
+import { ElementType, ReactNode, memo, useMemo } from "react";
 
 export type TypographyVariantValue =
   | "h1"
@@ -87,7 +87,7 @@ export type TypographyProps = {
   variant?: keyof typeof typographyVariantMapping;
 };
 
-export const Typography = ({
+const Typography = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -124,9 +124,10 @@ export const Typography = ({
   );
 };
 
-Typography.displayName = "Typography";
+const MemoizedTypography = memo(Typography);
+MemoizedTypography.displayName = "Typography";
 
-export const Heading1 = ({
+const Heading1 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -147,9 +148,10 @@ export const Heading1 = ({
   />
 );
 
-Heading1.displayName = "Heading1";
+const MemoizedHeading1 = memo(Heading1);
+MemoizedHeading1.displayName = "Heading1";
 
-export const Heading2 = ({
+const Heading2 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -170,9 +172,10 @@ export const Heading2 = ({
   />
 );
 
-Heading2.displayName = "Heading2";
+const MemoizedHeading2 = memo(Heading2);
+MemoizedHeading2.displayName = "Heading2";
 
-export const Heading3 = ({
+const Heading3 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -193,9 +196,10 @@ export const Heading3 = ({
   />
 );
 
-Heading3.displayName = "Heading3";
+const MemoizedHeading3 = memo(Heading3);
+MemoizedHeading3.displayName = "Heading3";
 
-export const Heading4 = ({
+const Heading4 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -216,9 +220,10 @@ export const Heading4 = ({
   />
 );
 
-Heading4.displayName = "Heading4";
+const MemoizedHeading4 = memo(Heading4);
+MemoizedHeading4.displayName = "Heading4";
 
-export const Heading5 = ({
+const Heading5 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -239,9 +244,10 @@ export const Heading5 = ({
   />
 );
 
-Heading5.displayName = "Heading5";
+const MemoizedHeading5 = memo(Heading5);
+MemoizedHeading5.displayName = "Heading5";
 
-export const Heading6 = ({
+const Heading6 = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -262,9 +268,10 @@ export const Heading6 = ({
   />
 );
 
-Heading6.displayName = "Heading6";
+const MemoizedHeading6 = memo(Heading6);
+MemoizedHeading6.displayName = "Heading6";
 
-export const Paragraph = ({
+const Paragraph = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -285,9 +292,10 @@ export const Paragraph = ({
   />
 );
 
-Paragraph.displayName = "Paragraph";
+const MemoizedParagraph = memo(Paragraph);
+MemoizedParagraph.displayName = "Paragraph";
 
-export const Subordinate = ({
+const Subordinate = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -308,9 +316,10 @@ export const Subordinate = ({
   />
 );
 
-Subordinate.displayName = "Subordinate";
+const MemoizedSubordinate = memo(Subordinate);
+MemoizedSubordinate.displayName = "Subordinate";
 
-export const Support = ({
+const Support = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -331,9 +340,10 @@ export const Support = ({
   />
 );
 
-Support.displayName = "Support";
+const MemoizedSupport = memo(Support);
+MemoizedSupport.displayName = "Support";
 
-export const Legend = ({
+const Legend = ({
   ariaDescribedBy,
   ariaLabel,
   ariaLabelledBy,
@@ -354,4 +364,19 @@ export const Legend = ({
   />
 );
 
-Legend.displayName = "Legend";
+const MemoizedLegend = memo(Legend);
+MemoizedLegend.displayName = "Legend";
+
+export {
+  MemoizedTypography as Typography,
+  MemoizedHeading1 as Heading1,
+  MemoizedHeading2 as Heading2,
+  MemoizedHeading3 as Heading3,
+  MemoizedHeading4 as Heading4,
+  MemoizedHeading5 as Heading5,
+  MemoizedHeading6 as Heading6,
+  MemoizedLegend as Legend,
+  MemoizedParagraph as Paragraph,
+  MemoizedSubordinate as Subordinate,
+  MemoizedSupport as Support,
+};