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