7 методов оптимизации производительности React 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> ) } @javascript_react