perf: add React.memo to hot-path components

client/src/shared/ui/OptimizedImage.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import React from 'react'
 import Box from '@mui/material/Box'
 import type { SxProps, Theme } from '@mui/material/styles'
 
@@ -35,7 +36,7 @@ function buildFallbackSrc(src: string, width: number): string {
   return `/uploads-resized/${pathPrefix}${parsed.uuid}.webp?w=${width}`
 }
 
-export function OptimizedImage({
+export const OptimizedImage = React.memo(function OptimizedImage({
   src,
   alt,
   widths = DEFAULT_WIDTHS,

client/src/shared/ui/UserAvatar.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
+import React from 'react'
 import Avatar from '@mui/material/Avatar'
 import type { SxProps, Theme } from '@mui/material/styles'
 import { createAvatar } from '@dicebear/core'
@@ -12,7 +13,7 @@ type UserAvatarProps = {
   sx?: SxProps<Theme>
 }
 
-export function UserAvatar({ userId, avatarUrl, avatarStyle, size = 40, sx }: UserAvatarProps) {
+export const UserAvatar = React.memo(function UserAvatar({ userId, avatarUrl, avatarStyle, size = 40, sx }: UserAvatarProps) {
   const [generatedSrc, setGeneratedSrc] = useState<string | null>(null)
   const styleId = avatarStyle || DEFAULT_STYLE_ID
   const styleIdRef = useRef(styleId)