map comments method seems to avoid endless loop problem

src/features/discussion/Discussion.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { unwrapResult } from '@reduxjs/toolkit';
 import { fetchComments, isPending } from '../posts/postsSlice';
+import { v4 } from 'uuid';
 
 export default function Discussion({permalink, isVisible}) {
     const [thread, setThread] = useState(null);
@@ -12,6 +13,8 @@ export default function Discussion({permalink, isVisible}) {
 
     const formattedLink = permalink.substring(0,(permalink.length-1));
 
+    let deps = [isVisible, data, setData, thread, setThread, formattedLink, dispatch];
+
     useEffect(() => {
         let isActive = true;
         if (isActive) {
@@ -21,32 +24,45 @@ export default function Discussion({permalink, isVisible}) {
                 .then((result) => setData(result));
             }
         }
+
         return () => {
             isActive = false;
         }
-    }, [isVisible, thread, formattedLink, dispatch]);
+
+    }, [dispatch, formattedLink, isVisible, setData]);
+
+    // if (data) {
+    //     let commentData = data[1];
+    //     let commentArray = commentData.data.children;
+
+    //     let toExport = [];
+    //     for (let comment of commentArray) {
+    //         toExport.push(
+    //             <div className="indiv-comment" key={v4()}>
+    //                 <p>{'u/' + comment.data.author}</p>
+    //                 <p>{comment.data.body}</p>
+    //             </div>
+    //         );
+    //     }
+
+    //     setThread(toExport);
+    // }
 
     useEffect(() => {
         if (data) {
             let commentData = data[1];
-            console.log(commentData);
+            let comments = commentData.data.children;
 
-            let commentArray = commentData.data.children;
-            console.log(commentArray);
-
-            let toExport = [];
-            for (let comment of commentArray) {
-                toExport.push(
-                    <>
-                    <p>{'u/' + comment.data.author}</p>
-                    <p>{comment.data.body}</p>
-                    </>
-                );
-            }
-
-            setThread(toExport);
+            setThread(comments.map((comment) => {
+                return (
+                    <div className="indiv-comment">
+                        <p>{'u/' + comment.data.author}</p>
+                        <p>{comment.data.body}</p>
+                    </div>
+                )
+            }))
         }
-    }, [data, thread]);
+    }, [data]);
 
     return (
         <div className="discussion-thread">