Можно ли без RTK Query избавиться от лишних запросов?

Можно ли избавиться от лишних запросов без RTK Query?

Да, абсолютно можно. RTK Query — это мощный инструмент для управления состоянием и кэшированием запросов в Redux, но он не является единственным способом оптимизации сетевых запросов. Без него можно эффективно контролировать частоту запросов, используя различные техники и паттерны на уровне компонентов, хуков, контекста или даже с помощью сторонних библиотек.

Основные подходы к оптимизации запросов без RTK Query

1. Использование React Hooks для локального кэширования

С помощью useState, useEffect и useRef можно создать простой механизм кэширования данных на уровне компонента или хука.

import { useState, useEffect, useRef } from 'react';

function useCachedFetch(url) {
  const [data, setData] = useState(null);
  const cache = useRef({});

  useEffect(() => {
    if (cache.current[url]) {
      setData(cache.current[url]);
      return;
    }

    fetch(url)
      .then(response => response.json())
      .then(result => {
        cache.current[url] = result;
        setData(result);
      });
  }, [url]);

  return data;
}

2. Контекст (Context) для глобального кэширования

React Context позволяет хранить данные на уровне приложения и избегать повторных запросов для одинаковых данных в разных компонентах.

import { createContext, useContext, useState } from 'react';

const ApiCacheContext = createContext();

export function ApiCacheProvider({ children }) {
  const [cache, setCache] = useState({});

  const fetchData = async (url) => {
    if (cache[url]) return cache[url];
    
    const response = await fetch(url);
    const data = await response.json();
    setCache(prev => ({ ...prev, [url]: data }));
    return data;
  };

  return (
    <ApiCacheContext.Provider value={{ fetchData }}>
      {children}
    </ApiCacheContext.Provider>
  );
}

3. Дедупликация запросов на уровне библиотеки

При использовании axios или fetch можно создать общий инстанс или сервис, который будет отслеживать текущие запросы.

class RequestDeduplicator {
  constructor() {
    this.pendingRequests = {};
  }

  async fetch(url) {
    if (this.pendingRequests[url]) {
      return this.pendingRequests[url];
    }

    const promise = fetch(url).then(res => res.json());
    this.pendingRequests[url] = promise;

    promise.finally(() => {
      delete this.pendingRequests[url];
    });

    return promise;
  }
}

4. Оптимизация через useMemo и мемоизацию

Для вычисляемых данных или данных, которые зависят от параметров, можно использовать мемоизацию.

const memoizedData = useMemo(() => {
  return expensiveCalculationOrFetch(param);
}, [param]);

Паттерны для предотвращения лишних запросов

• Debouncing и Throttling: Использование debounce и throttle для событий, которые могут вызывать запросы (например, поиск с автозаполнением).
• Pre-fetching и Background Updates: Загрузка данных заранее или в фоне при предполагаемой необходимости.
• Оптимизация зависимостей в useEffect: Точный контроль зависимостей в useEffect предотвращает случайные повторные запросы.
• Server State Libraries: Использование альтернативных библиотек, таких как SWR или react-query, которые специально созданы для управления состоянием сервера и кэширования.

Пример с SWR (альтернатива RTK Query)

import useSWR from 'swr';

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);

  if (error) return <div>Ошибка</div>;
  if (!data) return <div>Загрузка...</div>;
  
  return <div>Имя: {data.name}</div>;
}

SWR автоматически предоставляет:

• Кэширование данных
• Дедупликацию запросов
• Повторную валидацию (revalidation)
• Фоновое обновление

Ключевые различия подходов

Заключение

Избавиться от лишних запросов без RTK Query не только возможно, но и часто целесообразно. Выбор метода зависит от масштаба приложения:

• Для небольших проектов достаточно локального кэширования через хуки.
• Для средних — React Context или простые сервисы.
• Для сложных — специализированные библиотеки типа SWR или react-query, которые дают более полный контроль над серверным состоянием, чем даже RTK Query в некоторых сценариях.

Главное — понимать причины лишних запросов: повторные рендеры, дублирующие вызовы в разных компонентах, отсутствие инвалидации кэша. Решение этих проблем на фундаментальном уровне часто приводит к более оптимальной архитектуре, даже без использования RTK Query.