Como usar Firestore y React JS

Para este ejemplo usaremos reactfire que es un libreria que nos facilita utilizar firebase en React JS

Lo primero sera importar el hook useFirestore

Ejemplo:

import React, { Fragment, useEffect } from "react";
import { useFirestore } from "reactfire";

export default function Categorias() {
  const refFire = useFirestore();

  return (
    <Fragment>
    <h1>Aprendiendo useFirestore<h1>
    </Fragment>
  );
}

Ahora lo mas tipico es que nosotros vamos hacer consultas para esto usaremos el hook useEffect.

¿Ahora porque de ultimo retornamos la constante subscriber? Es para que nuestra hook no sea infinito useEffect

//Obteniendo las categorias
  useEffect(() => {
   const subscriber =  refFire
      .collection("categorias")
      .onSnapshot((snapshot) => {
        const categoriasTotales = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        console.log(categoriasTotales);
        setCategorias(categoriasTotales)
      });
      // Clean up the subscriber 
      // esto significa que se crea una nueva peticion en cada actualización. 
      return ()=> subscriber()
  }, [refFire]);

Nuestro ejemplo quedaria de la siguiente manera

import React, { Fragment, useEffect, useState } from "react";
import { useFirestore } from "reactfire";

export default function Categorias() {
  const refFire = useFirestore();
  const [Categorias, setCategorias] = useState([]);

  //Obteniendo las categorias
  useEffect(() => {
   const subscriber =  refFire
      .collection("categorias")
      .onSnapshot((snapshot) => {
        const categoriasTotales = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data(),
        }));
        console.log(categoriasTotales);
        setCategorias(categoriasTotales)
      });
      // Clean up the subscriber 
      // esto significa que se crea una nueva peticion en cada actualización. 
      return ()=> subscriber()
  }, [refFire]);

  return (
    <Fragment>
         <h1>Aprendiendo useFirestore<h1>
    </Fragment>
  );
}