React hooks versus standard service.js for Firestore

Question

I currently have a useFirestore hook for adding, deleting and updating documents in Firestore in a React social media app

I can then call those functions directly from a component using the hook which is great:

  const { addDocument, response } = useFirestore('events');

  const handleSubmit = (e) => {
    addDocument({ uid: user.uid, title, location });
  };

but I have some situations where i'm wondering is it better to not use a hook as it clutters the component code. An example is for friend requests:

If Mary requests John to be a friend I need to add 2 documents to firestore, 1 for Mary and 1 for John.
If John then accepts the request I need to delete both those documents and then add 2 new documents under something like confirmedFriends for both John and Mary

I don’t much like having to add 4 different firestore functions to the component handler:

const handleAcceptRequest = (…) => {
    e.preventDefault();
    deleteDocument(…);
    deleteDocument(…);
    addDocument(
     ….
     ….
     ….
    );
    addDocument(
     ….
     ….
     ….
    );
  };

I suppose I am getting confused as to whether you should always use a hook when interacting with firestore in a React project?

I think in this situation I would rather create something like a service.js file to handle multiple interactions in firestore for one 'action' like accepting a friend request. But I can only use the hooks in a component so is it a good solution to add a new service.js file and repeat logic to add and delete to firestore for the above situation?

Then it leads me to think that why not just change the useFirestore hook file completely to a standard file of functions that are reusable from outside components and then I can keep them seperate from components?

Is there a massive downside? So should I use functions or hooks or a hybrid of both? Any advice is much appreciated!

taiwanHsi · Answer

import firebase from "firebase";
const firebaseConfig = {
      apiKey: process.env.REACT_APP_FIREBASE_KEY,
      authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
      databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
      projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
      storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
      appId: process.env.REACT_APP_FIREBASE_APP_ID,
      measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
    };
    const app = firebase.initializeApp(firebaseConfig);
    const db = app.firestore();
    
    const studentID="XXXXXX";
    const conllectionName="YYYYY";

    //add new data(doc)
    const querySet = await db.collection(conllectionName).doc(studentID).set({
     studentName:"name",
     subjects:["math"],
    });
    //return querySet.id= doc.id
     
    //to array
    await db.collection(conllectionName).doc(studentID).update({
      subjects: firebase.firestore.FieldValue.arrayUnion("music"),
    });
    
    //update a attribute of data(doc)
    await db.collection(conllectionName).doc(studentID).update({
      studentName: "NewName",
    });

    //get data
    const queryGet = await db.collection(conllectionName).doc(studentID).get();
    //return queryGet.data()={
    //  studentName:"NewName",
    //  subjects:["math","music"]
    //  }

I don't know how you find that...it is interesting, but i still get used to the code of "server.js". At last, you can read the above code to get more code about firebase js.

So you are suggesting to not use React hooks at all?

Your situation i rather use "server.js". I use hook like "useCollection useDocument useAuthState", when i need "listen" online data.

Ex:online chatroom can not get the newest msg in the room when db is updated by other users, but useDocunent can do that. When we use Usedocument, if the doc is updated, then the hook datas of local will be updated . In other words, local web can keep step with db data.

React hooks versus standard service.js for Firestore

1 Answers