chore: wrap in a use memo

Signed-off-by: blam <ben@blam.sh> Signed-off-by: blam <ben@blam.sh>
2024-03-12 11:58:45 +01:00
parent 31fd1bc4e2
commit a9493c0bea
1 changed files with 23 additions and 18 deletions
@@ -16,7 +16,7 @@
 import MaterialAvatar from '@material-ui/core/Avatar';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, useMemo } from 'react';

 import { extractInitials, stringToColor } from './utils';

@@ -30,23 +30,28 @@ const useStyles = ({
  styles: CSSProperties;
  fontStyles: CSSProperties;
 }) =>
-  makeStyles(
-    (theme: Theme) => ({
-      avatar: {
-        width: '4rem',
-        height: '4rem',
-        color: theme.palette.common.white,
-        ...styles,
-      },
-      avatarText: {
-        fontWeight: theme.typography.fontWeightBold,
-        letterSpacing: '1px',
-        textTransform: 'uppercase',
-        ...fontStyles,
-      },
-    }),
-    { name: 'BackstageAvatar' },
-  )();
+  useMemo(
+    () =>
+      makeStyles(
+        (theme: Theme) => ({
+          avatar: {
+            width: '4rem',
+            height: '4rem',
+            color: theme.palette.common.white,
+            ...styles,
+          },
+          avatarText: {
+            fontWeight: theme.typography.fontWeightBold,
+            letterSpacing: '1px',
+            textTransform: 'uppercase',
+            ...fontStyles,
+          },
+        }),
+        { name: 'BackstageAvatar' },
+      )(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(styles), JSON.stringify(fontStyles)],
+  );

 /**
 * Properties for {@link Avatar}.