Оптимизация рендеринга в React: Практика использования useMemo, useCallback и memo

import React, { useState, useMemo, useCallback, memo } from 'react';

// Проблема: неоптимизированный компонент
const ExpensiveItem = ({ value, onClick }) => {
  // Имитация тяжелых вычислений
  const calculate = (val: number) => {
    let result = 0;
    for (let i = 0; i < 10000000; i++) {
      result += Math.sqrt(val);
    }
    return result;
  };

  // Расчет выполняется на каждый рендер
  const computedValue = calculate(value);
  
  return (
    <div onClick={() => onClick(value)}>
      Value: {value} | Computed: {computedValue.toFixed(2)}
    </div>
  );
};

// Решение 1: Использование useMemo для тяжелых вычислений
const OptimizedItem = ({ value, onClick }) => {
  const computedValue = useMemo(() => {
    let result = 0;
    for (let i = 0; i < 10000000; i++) {
      result += Math.sqrt(value);
    }
    return result;
  }, [value]); // Зависимость от value

  return (
    <div onClick={() => onClick(value)}>
      Value: {value} | Optimized: {computedValue.toFixed(2)}
    </div>
  );
};

// Решение 2: Использование memo для предотвращения ререндеров
const MemoizedItem = memo(({ value, onClick }) => {
  return (
    <div onClick={() => onClick(value)}>
      Memoized Item: {value}
    </div>
  );
});

// Демонстрационный компонент с различными подходами
const RenderingOptimizationDemo = () => {
  const [count, setCount] = useState(0);
  const [values] = useState([1, 2, 3, 4]);
  
  // Проблема: новая функция при каждом рендере
  const handleClickBasic = (val: number) => {
    console.log('Clicked:', val);
  };

  // Решение: useCallback для мемоизации функции
  const handleClickOptimized = useCallback((val: number) => {
    console.log('Optimized click:', val);
  }, []);

  return (
    <div className="container">
      <div className="instructions">
        <h2>Оптимизация рендеринга</h2>
        <p>Повышайте производительность с помощью проверенных методов React.</p>
      </div>
      
      <div className="count-section">
        <span>Value: {count}</span>
        <button onClick={() => setCount(c => c + 1)}>Increment</button>
        <div>Этот компонент перерендерится при изменении состояния</div>
      </div>
      
      <div className="examples">
        <div className="column">
          <h3>Без оптимизации</h3>
          {values.map(val => (
            <ExpensiveItem 
              key={val} 
              value={val} 
              onClick={handleClickBasic} 
            />
          ))}
          <p>Функции создаются заново при каждом рендере</p>
        </div>
        
        <div className="column">
          <h3>С оптимизацией</h3>
          {values.map(val => (
            <OptimizedItem 
              key={val} 
              value={val} 
              onClick={handleClickOptimized} 
            />
          ))}
          {values.map(val => (
            <MemoizedItem 
              key={val} 
              value={val} 
              onClick={handleClickOptimized} 
            />
          ))}
          <p>Функции мемоизированы, вычисления кэшированы</p>
        </div>
      </div>
      
      <div className="best-practices">
        <h3>Практические рекомендации:</h3>
        <ul>
          <li>Применяйте <code>memo</code> для чисто визуальных компонентов на часто обновляемых страницах</li>
          <li>Используйте <code>useMemo</code> для сложных вычислений или при формировании объектов/массивов</li>
          <li>Оборачивайте колбэк-функции в <code>useCallback</code> при передаче в <code>memo</code>-компоненты</li>
          <li>Всегда указывайте зависимости правильно - их пропуск ведет к ошибкам</li>
          <li>Избегайте преждевременной оптимизации: профилируйте приложения перед внесением изменений</li>
        </ul>
      </div>
    </div>
  );
};

export default RenderingOptimizationDemo;

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}

.instructions {
  background-color: #e6f7ff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  border-left: 4px solid #1890ff;
}

.count-section {
  background-color: #f8f9fa;
  padding: 15px;
  margin: 20px 0;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.count-section button {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.count-section button:hover {
  background-color: #096dd9;
}

.examples {
  display: flex;
  gap: 30px;
}

.column {
  flex: 1;
  padding: 15px;
  border-radius: 8px;
  background-color: #f0f2f5;
}

.column h3 {
  margin-top: 0;
  color: #1d39c4;
  border-bottom: 2px solid #adc6ff;
  padding-bottom: 8px;
}

.column div {
  padding: 12px;
  margin: 10px 0;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.column div:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.best-practices {
  margin-top: 30px;
  background-color: #f6ffed;
  padding: 15px 20px;
  border-radius: 8px;
  border-left: 4px solid #52c41a;
}

.best-practices ul {
  padding-left: 20px;
}

.best-practices li {
  margin-bottom: 10px;
  line-height: 1.6;
}

code {
  background-color: #f0f0f0;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}