Как выбрать чтение из Cloud Firestore, используя состояние React?

Question

Я работаю над одностраничным приложением, которое использует React и Firebase.И база данных - Cloud Firestore.

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

Меня беспокоит вопрос, как можно оптимизировать дляколичество операций чтения, которые будут выполнять мои пользователи.

Потому что сейчас У меня есть следующий код в основном для каждого компонента, который отображает продукты (один продукт или список продуктов):

• Хук useEffect(), извлекающий продукты из Firestore, который запускается при монтировании компонента.

ProductPage.js

https://www.mywebsite.com/product/product-slug

useEffect(() => {
  firebase.firestore().collection('products').where('slug', '==', 'product-slug').get()
  .then((querySnapshot) => {
    // STORE RESULT IN STATE
  });
},[]);

CategoryPage.js

https://www.mywebsite.com/category/someCategory

useEffect(() => {
  firebase.firestore().collection('products').where('category','==','someCategory').get()
    .then((querySnapshot) => {
      // STORE RESULT IN STATE
   })
},[]);

Представьте, что пользователь перемещается по следующим маршрутам:

• Проходит по маршруту category1, который отображает 20 товаров на странице, и просматривает страницы 1, 2 и 3. Всего 60 операций чтения.
• Клики понекоторый продукт на странице 3 и проверяет страницу продукта для этого конкретного продукта. Всего 1 чтение.
• Теперь он снова щелкает по меню category1 и снова просматривает страницы 1, 2 и 3. Всего 60 чтений.

Результат:

Мой пользователь сделал 121 чтение по тем же 60 документам.

ПРИМЕЧАНИЕ: компонент отключается при изменении маршрута, поэтому useEffect будет работать снова, когда они вернутся на тот же маршрут, даже если они уже посещали его.

КакМожно ли оптимизировать это?

То, о чем я думал до сих пор, это:

Примечание: это не огромное количество продуктов, например, всего 1000, максимум.

OPTION # 1

Каждый раз, когда пользователь выполняет запрос к категории продукта, я запрашиваю эту полную категорию и сохраняю ее в состояние в компоненте более высокого уровня, например App.js .Если он собирается снова запросить ту же категорию, я проверю, есть ли у меня ее состояние, и верну ее.Это как слой кеширования, использующий состояние React.

OPTION # 2

Возможно настроить прослушиватель для этого запроса в компоненте более высокого уровня, например App.js .Будет работать очень похоже на вариант № 1, потому что мне также придется сохранить результат в состоянии.

Есть ли лучший метод или шаблон для оптимизации для чтения в такой ситуации?