es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Muy alto número de lecturas en la base de datos de Firestore en mi Proyecto de React.

01 Aug, 2023 Programación

Estoy creando una aplicación CRUD simple utilizando react y firebase/firestore.

Actualmente tengo una colección de “productos” con cuatro registros.

La página de inicio recorre los productos y los muestra:

import React, { useEffect, useState } from 'react'
import { getDocs, collection } from "firebase/firestore"
import { db } from "../firebase-config"

const Home = () => {
  const [products, setProducts] = useState([])

  const productsCollectionRef = collection(db, "products") 

  useEffect(() => {
    const getProducts = async () =>{
      const data = await getDocs(productsCollectionRef)
      setProducts(data.docs.map((doc) => ({...doc.data(), id: doc.id})))
    }

    getProducts()
  })

  return (
    <div>
      {products.map((product) => {
        return(
          <div>
            <div>{product.name}</div>
            <div>{product.sku}</div><br>
          </div>
        )
      })}
    </div>
  )
}

export default Home

He jugado con la aplicación durante menos de una hora, tal vez he realizado aproximadamente 10-20 actualizaciones y el número de lecturas ha aumentado de alrededor de 30 a más de 35,000 en una hora.

Al principio, pensé que esta simple aplicación funcionaría con 50,000 lecturas de documentos gratuitas al día, pero ¿cómo ha llegado a 35k+?

Dejé la página allí sin hacer nada durante una hora y el número siguió aumentando rápidamente.

¿Alguna idea de qué puedo hacer para cambiar esto?

¡Muchas gracias por tu consejo!

Avísame si necesitas información adicional…

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que la aplicación está provocando lecturas innecesarias de la base de datos Firestore. Un problema que podría estar causando esto es la forma en que se configura el gancho useEffect. Actualmente, se ejecuta cada vez que el componente se vuelve a renderizar, lo cual puede suceder con frecuencia y dar lugar a múltiples lecturas de la base de datos.

    Para solucionar esto, podríamos agregar un arreglo de dependencias vacío a useEffect, lo que hará que se ejecute solo una vez en la renderización inicial:

    useEffect(() => {
  const getProducts = async () => {
    const data = await getDocs(productsCollectionRef)
    setProducts(data.docs.map((doc) => ({...doc.data(), id: doc.id})))
  }
  getProducts()
}, []) // <- agregar arreglo de dependencias vacío

    Esto debería reducir significativamente el número de lecturas de la base de datos, ya que los datos se obtendrán solo una vez cuando se monte el componente. Además, podríamos considerar implementar el almacenamiento en caché del lado del cliente o la paginación para optimizar aún más el rendimiento de la aplicación y reducir las lecturas de la base de datos.

Comments are closed.