React×firebaseでフロント側からドキュメントを削除するボタン設置

react×firebaseでアプリを作っている際、
フロント側からドキュメントを削除するボタンを作成したのですが、
少し躓きかけたのでメモします。

ドキュメント削除ボタンの実装

list.js

export const List = ({
  projects,
  setProjects,
  docId,
  deadlineDate,
}) => {
  const navigate = useNavigate();
  useEffect(() => {
    const projectsCollectionRef = collection(db, "projects");
    getDocs(projectsCollectionRef).then((querySnapShot) => {
      setProjects(
        querySnapShot.docs.map((doc) => ({ ...doc.data(), id: doc.id }))
      );
    });
    
    }, );

 
  return (
    <>
※一部省略していますが、ここに一覧が入ります。
↓ここからが削除ボタン↓
                <TableCell>
                  <Button
                    size="small"
                    variant="contained"
                    style={{
                      margin: "5px",
                      fontSize: "12px",
                      padding: "0.3vh",
                      color: "#FFFFFF",
                      background: "#3636B3",
                      "&:hover": {
                        backgroundColor: "#000066",
                      },
                    }}
                    onClick={()=>{
                      alert('削除が完了しました')
                      db.collection("projects").doc(row.id).delete()
                    }  
                    }
                  >
                    削除
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
};

useEffectの第二引数

これで試してみたところ、firestoreのコンソール上で該当idのドキュメントが削除されているのは確認できましたが、list.jsの一覧からは削除できていませんでした。

useEffetの第二引数に下記のように[projects]というfirebaseの該当コレクション名を入れると、ドキュメントの削除はすなわち[projects]の値に変化なので、更新されるようになりました。
が、この後、[projects]を第二引数に入れると毎秒データが読み込まれてしまい、ものの数十分で1日の上限に達してしまい、[projects]ではなく[setProjects]を第二引数に入れることで解決しました！

useEffect(() => {
    const projectsCollectionRef = collection(db, "projects");
    getDocs(projectsCollectionRef).then((querySnapShot) => {
      setProjects(
        querySnapShot.docs.map((doc) => ({ ...doc.data(), id: doc.id }))
      );
    });
    
    }, [setProjects]);

参考にしたもの

useEffectについて　　https://www.youtube.com/watch?v=f8iXdpbvvH8&t=903s