🛠️ Оптимизация ререндеринга в 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