🛠️ Оптимизация ререндеринга в React: 3 ключевых совета

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