1. Использование React.memo (HOC, а не хук)
import React, { memo } from 'react'
interface Props {
title: string
subtitle: string
}
const MyComponent: React.FC<Props> = memo(({ title, subtitle }) => {
return (
<div>
<h1>{title}</h1>
<h2>{subtitle}</h2>
</div>
)
})2. Оптимизация обработчиков событий с помощью useCallback
import React, { useState, useCallback } from 'react'
const Counter: React.FC = () => {
const [count, setCount] = useState(0) const increment = useCallback(() => {
setCount(prevCount => prevCount + 1)
}, [])
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
)
}3. Виртуализация длинных списков с помощью react-window
import React from 'react'
import { FixedSizeList as List } from 'react-window'
const Row: React.FC<{ index: number; style: React.CSSProperties }> = ({
index,
style,
}) => {
return (
<div style={style}>
<p>{`Row ${index}`}</p>
</div>
)
}
const VirtualizedList: React.FC = () => {
const itemCount = 1000
return (
<List height={500} itemCount={itemCount} itemSize={50} width={300}>
{Row}
</List>
)
}
4. Ленивая загрузка компонентов с помощью React.lazy и Suspense
import React, { lazy, Suspense } from 'react'
const LazyLoadedComponent = lazy(() => import('./LazyLoadedComponent'))
const App: React.FC = () => {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyLoadedComponent />
</Suspense>
</div>
)
}5. Использование API React.Profiler для выявления узких мест производительности
import React, { Profiler } from 'react'
const onRender = (
id: string,
phase: 'mount' | 'update',
actualDuration: number,
baseDuration: number,
startTime: number,
commitTime: number,
interactions: Set<{ id: number; name: string; timestamp: number }>
) => {
console.log('Profiler:', {
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime,
interactions,
})
}
const App: React.FC = () => {
return (
<Profiler id="MyComponent" onRender={onRender}>
<MyComponent />
</Profiler>
)
}6. Оптимизация обновления состояний с помощью Immer
import React, { useState } from 'react'
import produce from 'immer'
interface User {
id: number
name: string
}
const App: React.FC = () => {
const [users, setUsers] = useState<User[]>([
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
])
const updateUser = (id: number, newName: string) => {
setUsers(
produce((draftUsers: User[]) => {
const user = draftUsers.find(user => user.id === id)
if (user) {
user.name = newName
}
})
)
}
return (
// ...
)
}7. Использование троттлинга и дебаунсинга для обработчиков ввода
import React, { useState, useCallback } from 'react'
import { debounce } from 'lodash-es'
const SearchBox: React.FC = () => {
const [searchTerm, setSearchTerm] = useState('')
const handleSearch = useCallback(
debounce((value: string) => {
setSearchTerm(value)
}, 300),
[]
)
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
handleSearch(event.target.value)
}
return (
<div>
<input type="text" onChange={handleChange} />
</div>
)
}@react_tg