Как оптимизировать функцию?

Стратегии оптимизации функций в JavaScript/React

Оптимизация функций — это не только о скорости выполнения, но и о правильном использовании ресурсов браузера. В контексте фронтенда оптимизация охватывает несколько ключевых аспектов.

Мемоизация и кеширование

Если функция выполняет дорогостоящие вычисления, сохраняйте результаты для одинаковых входных параметров. В React это реализуется через useMemo для вычислений и useCallback для стабильности ссылок на функции.

// Плохо - пересчитывается на каждый рендер
function Component({ data }) {
  const filtered = data.filter(item => item.active);
  return <List items={filtered} />;
}

// Хорошо - кешируется
import { useMemo } from react;

function Component({ data }) {
  const filtered = useMemo(
    () => data.filter(item => item.active),
    [data]
  );
  return <List items={filtered} />;
}

Оптимизация циклов и поиска

Используйте структуры данных, подходящие для вашего сценария. Если часто ищете элементы, используйте Set вместо массива.

// Медленно - O(n) для каждого поиска
const hasUser = (userId) => users.find(u => u.id === userId);

// Быстро - O(1) поиск
const userMap = new Map(users.map(u => [u.id, u]));
const hasUser = (userId) => userMap.has(userId);

// Для частых операций фильтрации
const activeUsers = new Set(users.filter(u => u.active).map(u => u.id));
const isActive = (userId) => activeUsers.has(userId);

Избегайте синхронных тяжёлых операций

Перемещайте сложные вычисления в Web Workers или асинхронные операции.

Профилирование с React DevTools

Используйте Profiler в React DevTools для выявления узких мест и ненужных ре-рендеров.

Асинхронные операции и управление состоянием

Правильно управляйте асинхронностью и игнорируйте результаты устаревших запросов, чтобы избежать race conditions.