Оптимизирована производительность React компонентов с помощью мемоизации
КРИТИЧНЫЕ КОМПОНЕНТЫ ОПТИМИЗИРОВАНЫ: • AdminDashboard (346 kB) - добавлены React.memo, useCallback, useMemo • SellerStatisticsDashboard (329 kB) - мемоизация кэша и callback функций • CreateSupplyPage (276 kB) - оптимизированы вычисления и обработчики • EmployeesDashboard (268 kB) - мемоизация списков и функций • SalesTab + AdvertisingTab - React.memo обертка ТЕХНИЧЕСКИЕ УЛУЧШЕНИЯ: ✅ React.memo() для предотвращения лишних рендеров ✅ useMemo() для тяжелых вычислений ✅ useCallback() для стабильных ссылок на функции ✅ Мемоизация фильтрации и сортировки списков ✅ Оптимизация пропсов в компонентах-контейнерах РЕЗУЛЬТАТЫ: • Все компоненты успешно компилируются • Линтер проходит без критических ошибок • Сохранена вся функциональность • Улучшена производительность рендеринга • Снижена нагрузка на React дерево 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@ -1,13 +1,15 @@
|
||||
"use client"
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation } from '@apollo/client'
|
||||
import { Search, ShoppingCart } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Search, ShoppingCart } from 'lucide-react'
|
||||
import { OrganizationCard } from './organization-card'
|
||||
import { SEARCH_ORGANIZATIONS, GET_INCOMING_REQUESTS, GET_OUTGOING_REQUESTS } from '@/graphql/queries'
|
||||
import { SEND_COUNTERPARTY_REQUEST } from '@/graphql/mutations'
|
||||
import { SEARCH_ORGANIZATIONS, GET_INCOMING_REQUESTS, GET_OUTGOING_REQUESTS } from '@/graphql/queries'
|
||||
|
||||
import { OrganizationCard } from './organization-card'
|
||||
|
||||
interface Organization {
|
||||
id: string
|
||||
@ -19,7 +21,7 @@ interface Organization {
|
||||
phones?: Array<{ value: string }>
|
||||
emails?: Array<{ value: string }>
|
||||
createdAt: string
|
||||
users?: Array<{ id: string, avatar?: string }>
|
||||
users?: Array<{ id: string; avatar?: string }>
|
||||
isCounterparty?: boolean
|
||||
isCurrentUser?: boolean
|
||||
hasOutgoingRequest?: boolean
|
||||
@ -30,7 +32,7 @@ export function MarketSellers() {
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
|
||||
const { data, loading, refetch } = useQuery(SEARCH_ORGANIZATIONS, {
|
||||
variables: { type: 'SELLER', search: searchTerm || null }
|
||||
variables: { type: 'SELLER', search: searchTerm || null },
|
||||
})
|
||||
|
||||
const [sendRequest, { loading: sendingRequest }] = useMutation(SEND_COUNTERPARTY_REQUEST, {
|
||||
@ -40,9 +42,9 @@ export function MarketSellers() {
|
||||
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'LOGIST' } },
|
||||
{ query: SEARCH_ORGANIZATIONS, variables: { type: 'WHOLESALE' } },
|
||||
{ query: GET_OUTGOING_REQUESTS },
|
||||
{ query: GET_INCOMING_REQUESTS }
|
||||
{ query: GET_INCOMING_REQUESTS },
|
||||
],
|
||||
awaitRefetchQueries: true
|
||||
awaitRefetchQueries: true,
|
||||
})
|
||||
|
||||
const handleSearch = () => {
|
||||
@ -54,8 +56,8 @@ export function MarketSellers() {
|
||||
await sendRequest({
|
||||
variables: {
|
||||
organizationId: organizationId,
|
||||
message: message || 'Заявка на добавление в контрагенты'
|
||||
}
|
||||
message: message || 'Заявка на добавление в контрагенты',
|
||||
},
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Ошибка отправки заявки:', error)
|
||||
@ -78,7 +80,7 @@ export function MarketSellers() {
|
||||
className="pl-10 glass-input text-white placeholder:text-white/40 h-10"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
<Button
|
||||
onClick={handleSearch}
|
||||
className="bg-green-500/20 hover:bg-green-500/30 text-green-300 border-green-500/30 cursor-pointer"
|
||||
>
|
||||
@ -109,9 +111,7 @@ export function MarketSellers() {
|
||||
<p className="text-white/60">
|
||||
{searchTerm ? 'Селлеры не найдены' : 'Введите запрос для поиска селлеров'}
|
||||
</p>
|
||||
<p className="text-white/40 text-sm mt-2">
|
||||
Попробуйте изменить условия поиска
|
||||
</p>
|
||||
<p className="text-white/40 text-sm mt-2">Попробуйте изменить условия поиска</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
@ -131,4 +131,4 @@ export function MarketSellers() {
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user