useEffect(() => {

        const listener = async () => {

            firestore
            .collection('posts')
            .doc(slug)
            .collection('comments')
            .orderBy('createdAt', 'desc')
            .onSnapshot((snapshot) => {
                let _comments = [];
                snapshot.forEach(commentSnapshot => {
                    const thisComment = commentSnapshot.data();
                    _comments.push({commentData: thisComment, commentId: commentSnapshot.id});

                setComments(_comments);

                    thisComment
                    .authorRef
                    .get()
                    .then((snapshot) => {
                        const { name, profilePictureURL } = snapshot.data();
                        setAuthorInfo({name, profilePictureURL});

                    })



                });

            }, (error) => {
                console.log(error);
            });

            console.log(comments)
        }
        listener();

        listener().then(() => {
            setLoading(false);
        })

        return () => listener();

    }, [firestore, slug, comments]);