Firebase+reactのアプリで無限にレンダリングされる

Question

実現したいこと

最終的に実現したいことは、コメントの一覧に投稿した時刻を表示することです。

背景

上記の画像の様に、formと表示が一体となっているコメント一覧をReact、TypeScript、Firestoreを用いて作成しています。

コメントを投稿すると、firestoreのonSnapshotでリアルタイムで検知してしたのコメント一覧に表示するという仕組みになっていて、実装自体は完了していて、リアルタイムでの表示もうまくできています。

ソースコード

以下は該当部分のソースコードです。
※importなど少し省略しています。
CommentForm.tsx

export default function CommentForm({ id }: any) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [content, setContent] = useState("");
  const { currentUser, createComment }: any = useAuth();
  const [open, setOpen] = React.useState(false);
  const [comment, setComment] = useState([]);

  const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
    if (reason === "clickaway") {
      return;
    }
    setOpen(false);
  };

  const inputContent = useCallback(
    (event) => {
      setContent(event.target.value);
    },
    [setContent]
  );

  const handleSubmit = async (e: any) => {
    e.preventDefault();

    if (content === "") {
      return setError("コメントを入力してください"), setOpen(true);
    }
    if (content.length > 200) {
      return setError("200文字以内で入力してください"), setOpen(true);
    }

    try {
      setError("");
      setLoading(true);
      const uid = currentUser.uid;
      return createComment(id, content, uid);
    } catch {
      setError("投稿に失敗しました");
      setOpen(true);
    } finally {
      setLoading(false);
      setContent("");
    }
  };

  useEffect(() => {
    let comments: any = [];
    const unsubscribe: any = db
      .collection("posts")
      .doc(id)
      .collection("comments")
      .orderBy("createdAt", "desc")
      .onSnapshot((snapshots) => {
        snapshots.docChanges().forEach((change) => {
          const data = change.doc.data({ serverTimestamps: "estimate" });
          const changeType = change.type;
          const date = data.createdAt.toDate();

          switch (changeType) {
            case "added":
              comments.push({ ...data, createdAt: date });
              break;
            case "modified":
              const index = comments.findIndex(
                (comment: any) => comment.id === change.doc.id
              );
              comments[index] = comment;
              break;
            case "removed":
              comments = comments.filter(
                (comment: any) => comment.id !== change.doc.id
              );
              break;
            default:
              break;
          }
        });
        setComment(comments);
        return () => unsubscribe();
      });
  }, []);

  return (
    <>
      <form noValidate autoComplete="off" onSubmit={handleSubmit}>
        <textarea
          className="comment-textarea"
          name="content"
          id="content"
          placeholder="コメントを残す"
          onChange={inputContent}
          value={content}
        ></textarea>
        <div className="comment-submit-wrapper">
          <Button
            className="comment-submit"
            color="primary"
            variant="contained"
            type="submit"
            disabled={loading}
          >
            投稿する
          </Button>
        </div>
      </form>
      {console.log(comment)}
      {comment.map((commentItem: any) => (
        <Comment
          key={commentItem.id}
          id={commentItem.id}
          uid={commentItem.uid}
          content={commentItem.content}
          createdAt={commentItem.createdAt}
        />
      ))}
    </>
  );
}

CommentForm.tsxのhandleSubmit 内にあるcreateComment の中身は以下の通りです。

// timestampはfirebaseのserverTimestampです。
  const createComment = (postId: string, content: string, uid: string) => {
    db.collection("posts")
      .doc(postId)
      .collection("comments")
      .add({
        content: content,
        createdAt: timestamp,
        uid: uid,
      })
      .then(async (result: any) => {
        const id = result.id;
        const commentsRef = db
          .collection("posts")
          .doc(postId)
          .collection("comments")
          .doc(id);
        await commentsRef.set({ id: id }, { merge: true });
      });
  };

Comment.tsx

export default function Comment({ id, uid, content, createdAt }: any) {
  const [commentUsername, setCommentUsername] = useState();

  useEffect(() => {
    db.collection("users")
      .doc(uid)
      .get()
      .then((snapshot: any) => {
        const data: any = snapshot.data();
        const username = data.username;
        setCommentUsername(username);
      });
  }, []);

  return (
    <div className="comment-block">
      <p>{commentUsername}</p>
      <p>{content}</p>
      {/* <p>{createdAt}</p> */}
      {/* createdAtを入れるとError: Objects are not valid as a React childというエラーになる */}
    </div>
  );
}

問題点

実装自体はうまくいっているのですが、リアルタイムで投稿を表示するために、CommentForm.tsxのuseEffectで投稿を取得する部分をgetからonSnapshotに変えたあたりから、何かしらコードを間違えたのか、console.log(comment)でuseEffectで取得した内容を入れたstateをlogに出力してみたところ、3つしかコメントがないのに、以下の画像の様にコンソールに大量にログが出力されました。

もちろん、returnの中でsetStateの様なことをすると無限にレンダリングされることは知っているのですが、今回はhooksのセッター関数はreturn内では使っていません。

また、propsとして、子のコンポーネントであるComment.tsxに渡したcreatedAtをComment.tsxでlogに出力してももちろん変わらず無限にレンダリングされます。

さらに、Comment.tsxでcreatedAtのpropsを無理やり表示しようとしてもError: Objects are not valid as a React child (found: Thu Dec 17 2020 19:48:18 GMT+0900 (日本標準時)). If you meant to render a collection of children, use an array instead.というエラーが出ます。

Reactについての理解が乏しく、原因がわかりそうになかったので質問させていただきました。

ご回答お待ちしております。

追記

useEffect内にてリスナーのデタッチのためのunsbscribeをreturnしていますが、ご指摘いただいた通り、returnを消してunsubscribe()だけに変更したらレンダリングが抑えられる様になりました。

しかしながら、時間が経って再びconsoleに出力すると、直す前と変わらず無限にレンダリングがされてしまっていました。その上で、リアルタイムのコメントの反映もされなくなってしまったので、onSnapshot((snapshots) => {})の外にreturn unsubscribe;とすることで、リアルタイムのコメントの反映の部分は直ったのですが、依然として無限にレンダリングされる現象が直りません。

  useEffect(() => {
    let comments: any = [];
    const unsubscribe: any = db
      .collection("posts")
      .doc(id)
      .collection("comments")
      .orderBy("createdAt", "desc")
      .onSnapshot((snapshots) => {
        snapshots.docChanges().forEach((change) => {
          const data = change.doc.data({ serverTimestamps: "estimate" });
          const changeType = change.type;

          switch (changeType) {
            case "added":
              comments.push(data);
              break;
            case "modified":
              const index = comments.findIndex(
                (comment: any) => comment.id === change.doc.id
              );
              comments[index] = comment;
              break;
            case "removed":
              comments = comments.filter(
                (comment: any) => comment.id !== change.doc.id
              );
              break;
            default:
              break;
          }
        });
        setComment(comments);
      });
      return unsubscribe; //変更箇所
  }, []);

Answer 1

Firebase は経験ないのですが、ヤバイところはわかりました。useEffect の最後で再帰関数になっています。

        return () => unsubscribe();

とくにこちらから何も返さなくても unsubscribe 関数は返ってきますのでここを削除すればよいでしょう。

Comments

[kobaryo04ysh]

ご回答ありがとうございます！削除というのは、returnを削除して、unsbscribe()とすれば良いということですよね？

それで試してみたところ、無限にレンダリングされるのは直りました！