Как оптимизировать компонент в React

Для оптимизации React-компонентов используйте: 1. **React.memo** – мемоизация компонента для предотвращения лишних ререндеров при неизменных пропсах: ```jsx const MemoComponent = React.memo(function MyComponent({ prop }) { return ; }); ``` 2. **useMemo/useCallback** – кеширование вычислений и функций: ```jsx const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]); ``` 3. **Разделение кода** – динамический импорт с React.lazy: ```jsx const LazyComponent = React.lazy(() => import('./HeavyComponent')); ``` 4. **Виртуализация** – для длинных списков (react-window, react-virtualized) 5. **Оптимизация контекста** – разделение контекстов или использование селекторов (use-context-selector) Также важно избегать: - Инлайн-функций/объектов в пропсах - Лишних обновлений состояния - Глубоких структур в пропсах