From 0079aa817665ccf30b8b844499443ef925926a93 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 13 Jul 2026 20:18:59 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20memoize=20the=20?=
 =?UTF-8?q?Avatar=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Avatar component is simple and stateless. Memoize it to avoid
unnecessary re-renders when its props have not changed.
---
 src/frontend/src/components/Avatar.tsx | 53 ++++++++++++--------------
 1 file changed, 25 insertions(+), 28 deletions(-)

diff --git a/src/frontend/src/components/Avatar.tsx b/src/frontend/src/components/Avatar.tsx
index 168fa953..6be35f90 100644
--- a/src/frontend/src/components/Avatar.tsx
+++ b/src/frontend/src/components/Avatar.tsx
@@ -49,32 +49,29 @@ export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
   bgColor?: string
 } & RecipeVariantProps<typeof avatar>
 
-export const Avatar = ({
-  name,
-  bgColor,
-  context,
-  notification,
-  style,
-  ...props
-}: AvatarProps) => {
-  const initial = name?.trim()?.charAt(0) ?? ''
-  return (
-    <div
-      style={{
-        backgroundColor: bgColor,
-        ...style,
-      }}
-      className={avatar({ context, notification })}
-      {...props}
-    >
-      <span
-        aria-hidden="true"
-        className={css({
-          marginTop: '-0.3rem',
-        })}
+export const Avatar = React.memo(
+  ({ name, bgColor, context, notification, style, ...props }: AvatarProps) => {
+    const initial = name?.trim()?.charAt(0) ?? ''
+    return (
+      <div
+        style={{
+          backgroundColor: bgColor,
+          ...style,
+        }}
+        className={avatar({ context, notification })}
+        {...props}
       >
-        {initial}
-      </span>
-    </div>
-  )
-}
+        <span
+          aria-hidden="true"
+          className={css({
+            marginTop: '-0.3rem',
+          })}
+        >
+          {initial}
+        </span>
+      </div>
+    )
+  }
+)
+
+Avatar.displayName = 'Avatar'