Как оптимизировать количество рендеров в React

Question

Оптимизация ререндеров в React достигается через несколько основных подходов: использование React.memo для мемоизации компонентов, применение useMemo и useCallback для кэширования значений и функций, правильное управление состоянием с помощью useReducer, разделение компонентов на более мелкие части, и оптимизацию контекста через мемоизацию. Также важно избегать создания новых объектов и функций в теле компонента, так как это приводит к лишним ререндерам.

YeaHub · Accepted Answer

Оптимизация количества ререндеров - ключевой аспект производительности React приложений.Основные причины лишних ререндеровИзменение props - даже если новые props фактически не изменилисьИзменение state - обновление состояния компонентаИзменение контекста - обновление значения в Context APIРерендер родителя - дочерние компоненты перерисовываются автоматическиМетоды оптимизации1. React.memo для мемоизации компонентовjsxconst ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) { // Компонент будет ререндериться только при изменении props return

{data}

; });2. useMemo для кэширования вычисленийjsxfunction Component({ items }) { const expensiveValue = useMemo(() => { return items.filter(item => item.active) .reduce((sum, item) => sum + item.value, 0); }, [items]); // Пересчитывается только при изменении items }3. useCallback для стабильных функцийjsxfunction Parent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { setCount(prev => prev + 1); }, []); // Функция не пересоздается при каждом рендере return ; }4. Оптимизация работы с Contextjsxconst MyContext = React.createContext(); function ContextProvider({ children }) { const [state, setState] = useState({}); const value = useMemo(() => ({ state, updateState: setState }), [state]); return ( {children} ); }5. Разделение компонентовjsx// ПЛОХО: весь компонент ререндерится при изменении input function UserProfile({ user }) { const [input, setInput] = useState(''); return (

{user.name}

setInput(e.target.value)} />

); } // ХОРОШО: input изолирован в отдельный компонент function UserProfile({ user }) { return (

{user.name}

); }Практические стратегииИзбегайте создания объектов в renderjsx// ПЛОХО: новый объект при каждом рендере // ХОРОШО: вынесено за пределы компонента или useMemo const style = useMemo(() => ({ color: 'red' }), []); Используйте правильные зависимостиjsx// Указывайте минимально необходимые зависимости useEffect(() => { // эффект }, [dependency1, dependency2]); // Только то, что действительно используетсяИнструменты для отладкиReact DevTools Profiler - анализ производительности компонентовWhy did you render - библиотека для отслеживания причин ререндеровВывод: Оптимизация ререндеров требует комбинированного подхода - мемоизация компонентов и значений, правильное управление состоянием, разделение ответственности между компонентами. Начинайте оптимизацию только после выявления реальных проблем с производительностью.