🛠️ Оптимизация ререндеринга в React: 3 ключевых совета — 6 апреля 2026 г. в 07:50:32.921
🛠️ Оптимизация ререндеринга в React: 3 ключевых совета Ререндеринг — один из главных "скрытых" врагов производительности в React. Если компонент ререндерится слишком часто, это может привести к лагам и снижению FPS в UI. Сегодня разберём три способа, как минимизировать ненужные ререндеры. 1️⃣ Используйте React.memo Если ваш компонент получает одинаковые пропсы и не должен ререндериться без изменений, оберните его в React.memo. 🔹 Пример: const MyComponent = React.memo(({ count }: { count: number }) => { console.log('Ререндер!'); return <div>Count: {count}</div>; }); 👉 Теперь компонент будет ререндериться только если count изменился. 2️⃣ Используйте useCallback для функций Передача новой функции в пропсы приводит к ререндерингу. useCallback предотвращает это: 🔹 Пример: const handleClick = useCallback(() => { console.log('Clicked!'); }, []); 👉 Теперь handleClick не будет пересоздаваться при каждом ререндере. 3️⃣ Используйте useMemo для вычислений Если у вас есть тяжёлые вычисления, мемоизируйте их с useMemo: 🔹 Пример: const expensiveValue = useMemo(() => { return calculateHeavyStuff(data); }, [data]); 👉 Теперь calculateHeavyStuff будет выполняться только при изменении data, а не при каждом ререндере. ✍️ @React_lib