perf: add React.memo to hot-path components

client/src/app/layout/AppHeader.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import React from 'react'
 import AppBar from '@mui/material/AppBar'
 import Badge from '@mui/material/Badge'
 import Box from '@mui/material/Box'
@@ -30,7 +31,7 @@ type NavItem = { label: string; to: string }
 
 const navItems: NavItem[] = [{ label: 'Каталог', to: '/' }]
 
-export function AppHeader() {
+export const AppHeader = React.memo(function AppHeader() {
   const { mode, resolvedMode, scheme, setScheme, cycleMode } = useThemeController()
   const user = useUnit($user)
   const navigate = useNavigate()

client/src/entities/product/ui/ProductCard.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { useCallback, useMemo, useRef } from 'react'
+import React from 'react'
 import { useMediaQuery } from '@mui/material'
 import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
@@ -18,7 +19,7 @@ import type { Swiper as SwiperType } from 'swiper/types'
 
 type Props = { product: Product; mediaHeight?: number; actions?: ReactNode }
 
-export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
+const ProductCardInner = ({ product, mediaHeight = 200, actions }: Props) => {
   const navigate = useNavigate()
   const isMobile = useMediaQuery('(max-width:600px)')
   const swiperRef = useRef<SwiperType | null>(null)
@@ -247,3 +248,7 @@ export function ProductCard({ product, mediaHeight = 200, actions }: Props) {
     </Card>
   )
 }
+
+export const ProductCard = React.memo(ProductCardInner, (prev, next) => {
+  return prev.product.id === next.product.id && prev.mediaHeight === next.mediaHeight && prev.actions === next.actions
+})

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)