Какие знаешь способы оптимизации ререндера
- React.memo – мемоизация компонентов для предотвращения лишних ререндеров при одинаковых пропсах.
const MemoComponent = React.memo(Component);- useMemo/useCallback – кеширование значений и функций, чтобы они не пересоздавались при каждом рендере.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);-
Разделение состояния – вынос изменяемого состояния в отдельные компоненты, чтобы не триггерить ререндер родителя.
-
Virtualization (react-window, react-virtualized) – рендер только видимых элементов в больших списках.
-
Оптимизация контекста – разбивка контекста на мелкие части или использование селекторов (например, use-context-selector).
-
Избегать инлайн-объектов/функций – они создаются заново при каждом рендере, что может вызывать ререндеры дочерних компонентов.
-
shouldComponentUpdate/PureComponent – ручной контроль ререндеров в классовых компонентах.
-
Оптимизация анимаций – использование CSS-анимаций или React Spring вместо JS-анимаций.
-
Debounce/Throttle – для событий, которые часто триггерят ререндер (например, скролл, resize).
офферы быстрее!
Следующий вопрос
Это единственный вопрос по вашему фильтру