From a9493c0beaa6ae9189d9dcf87023e65aff87a64e Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Tue, 12 Mar 2024 11:58:45 +0100
Subject: [PATCH] chore: wrap in a use memo Signed-off-by: blam <ben@blam.sh>

Signed-off-by: blam <ben@blam.sh>
---
 .../src/components/Avatar/Avatar.tsx          | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx
index 148d455312..6e5e90797f 100644
--- a/packages/core-components/src/components/Avatar/Avatar.tsx
+++ b/packages/core-components/src/components/Avatar/Avatar.tsx
@@ -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}.