파이어베이스 할당량 초과 문제

파이어스토어에서 데이터를 가져올 때 댓글을 추가할 때마다 바로바로 업데이트 되지 않는다.
댓글이 추가되면 바로 추가된 댓글 리스트 데이터들을 불러와야한다.

내가 짠 코드는 useEffect를 통해 댓글 데이터가 변할 때 마다 값을 불러오고 상태 값을 변경시키기 때문에 무한 리렌더링이 발생하는 것이였다. 데이터가 얼마 없음에도 불구하고 파이어베이스 할당량이 초과된 것이였다..

export default function CommnetList() {
  const { id }: { id: string } = useParams();
  const [comments, setComments] = useState<Comments[] | null>(null);
  const getComment = async (id: string) => {
    const comment = await getComments(id);
    setComments(comment);
  };

  //안좋은 방식 ❌
  useEffect(() => {
    getComment(id);
  }, [comments]);

무한 리렌더링이 되지 않기 위해
첫 렌더링될 때만 댓글 데이터들을 불러온다.
그리고 댓글을 추가하는 부분에서 데이터를 불러오자!

댓글을 추가하면 파이어스토어에 데이터가 추가될 때까지
기다려주고 (await) 그 다음 데이터를 받아온다.

  const onSubmit: SubmitHandler<Comment> = async (data) => {
  const newComment = {
    cid: '123',
    psid: id,
    displayName: '홍길동',
    content: data.content,
    photoUrl:'기본 이미지',
    createdAt: new Date()
  };
  await addComment(newComment);
  getComments(id);
  reset();
};

➡️ 이외에 방법으로 리액트 쿼리를 통해 데이터가 추가될 때마다 업데이트를 해주면 할당량을 초과할 일은 없을 것이다.