After I delete data in the code below, I would like the page to display the change without having to refresh manually. I am sure there are a million ways to do this, but I am looking for best practice. Any tips? (The function below is located in the app component, and I am calling the function using an onClick on a button)

  const deleteBooklet = async (id) => {
    const bookletDoc = doc(db, "Booklet", id);
    await deleteDoc(bookletDoc);
  };

CodePudding user response：

Use the onSnapshot listener wherever you are reading the data.

This will update as soon as an item is added or deleted. You do not need to reload the page to see the most recent data.