Как избежать двойного вызова fetch, если один и тот же кастомный хук используется в двух разных компонентах на одной странице?

Проблема двойного вызова fetch

Когда один и тот же кастомный хук, выполняющий fetch, используется в двух разных компонентах на одной странице, каждый компонент при монтировании инициирует свой собственный запрос. Это приводит к дублированию сетевых вызовов, что увеличивает нагрузку на сервер и замедляет работу приложения.

Решение с помощью внешнего хранилища

Один из способов — вынести состояние запроса в глобальное хранилище, например, в Redux или React Context. Хук будет проверять, есть ли уже данные в хранилище, и если да, то не выполнять новый запрос.

// useData.js
import { useContext } from 'react';
import { DataContext } from './DataContext';

export function useData() {
  const { data, fetchData } = useContext(DataContext);
  if (!data) {
    fetchData(); // выполняется только один раз
  }
  return data;
}

Решение с помощью библиотеки React Query

React Query (TanStack Query) предоставляет встроенную дедупликацию запросов. Если несколько компонентов используют один и тот же ключ запроса, библиотека автоматически объединяет их в один вызов.

import { useQuery } from '@tanstack/react-query';

function useData() {
  return useQuery(['data'], fetchData);
}

// В любом компоненте:
const { data } = useData();

Решение с помощью модульного кэша

Можно создать простой кэш в модульной переменной, который будет хранить результат запроса. Хук проверяет кэш перед выполнением fetch.

let cache = null;

export function useData() {
  const [data, setData] = useState(cache);
  useEffect(() => {
    if (!cache) {
      fetch('/api/data')
        .then(res => res.json())
        .then(result => {
          cache = result;
          setData(result);
        });
    }
  }, []);
  return data;
}

Вывод

Выбор метода зависит от сложности приложения: для простых случаев подойдет модульный кэш, для средних — React Context, для крупных проектов с множеством запросов — React Query или Redux Toolkit Query.