Как оптимизировать отрисовку

1. **Virtualization** (React-Window, React-Virtualized) – рендерим только видимые элементы в списках/таблицах. ```jsx import { FixedSizeList as List } from 'react-window'; {({ index, style }) =>

Row {index}

} ``` 2. **Memoization** – `React.memo`, `useMemo`, `useCallback` для предотвращения лишних ререндеров. ```jsx const MemoizedComponent = React.memo(ExpensiveComponent); const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); ``` 3. **Code Splitting** – динамическая загрузка компонентов (`React.lazy` + `Suspense`). ```jsx const LazyComponent = React.lazy(() => import('./HeavyComponent')); }> ``` 4. **Оптимизация CSS** – избегаем сложных селекторов, используем `will-change`, `contain: strict` для изоляции перерисовки. 5. **Debounce/Throttle** – для обработки частых событий (скролл, resize). 6. **Профилирование** – React DevTools, Chrome Performance Tab для поиска узких мест. 7. **Избегание инлайновых стилей/функций** – они создают новые объекты на каждом рендере.