fix dependency logic

src/components/ReplyModal.jsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { usePublishComment } from '@plebbit/plebbit-react-hooks';
 import { StyledModal } from './styled/ReplyModal.styled';
@@ -30,6 +30,8 @@ const ReplyModal = ({ isOpen, closeModal }) => {
 
   const [errorMessage, setErrorMessage] = useState(null);
   useError(errorMessage, [errorMessage]);
+
+  const [triggerPublishComment, setTriggerPublishComment] = useState(false);
   
   const location = useLocation();
 
@@ -86,7 +88,7 @@ const ReplyModal = ({ isOpen, closeModal }) => {
   }, [index, location, setPendingCommentIndex]);
 
   
-  const resetFields = () => {
+  const resetFields = useCallback(() => {
     if (nameRef.current) {
       nameRef.current.value = '';
     }
@@ -96,7 +98,7 @@ const ReplyModal = ({ isOpen, closeModal }) => {
     if (linkRef.current) {
       linkRef.current.value = '';
     }
-  };
+  }, []);
 
 
   const handleSubmit = async (event) => {
@@ -111,18 +113,21 @@ const ReplyModal = ({ isOpen, closeModal }) => {
       link: linkRef.current.value || undefined,
       parentCid: selectedParentCid,
     }));
+  
+    setTriggerPublishComment(true);
   };
   
   
   useEffect(() => {
-    if (publishCommentOptions.content) {
+    if (publishCommentOptions.content && triggerPublishComment) {
       (async () => {
         await publishComment();
         resetFields();
         closeModal();
       })();
+      setTriggerPublishComment(false);
     }
-  }, [publishCommentOptions]);
+  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields, closeModal]);
 
 
   const getChallengeAnswersFromUser = async (challenges) => {

src/components/views/Board.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -64,6 +64,9 @@ const Board = () => {
 
   const account = useAccount();
 
+  const [triggerPublishComment, setTriggerPublishComment] = useState(false);
+
+
   const flattenedRepliesByThread = useMemo(() => {
     return selectedFeed.reduce((acc, thread) => {
       const replies = flattenCommentsPages(thread.replies);
@@ -209,7 +212,7 @@ const Board = () => {
   }, [index, navigate, setPendingCommentIndex]);
 
   
-  const resetFields = () => {
+  const resetFields = useCallback(() => {
     if (nameRef.current) {
       nameRef.current.value = '';
     }
@@ -222,7 +225,7 @@ const Board = () => {
     if (linkRef.current) {
       linkRef.current.value = '';
     }
-  };
+  }, []);
 
 
   const handleSubmit = async (event) => {
@@ -237,17 +240,19 @@ const Board = () => {
       content: commentRef.current.value || undefined,
       link: linkRef.current.value || undefined,
     }));
+
+    setTriggerPublishComment(true);
   };
   
   
   useEffect(() => {
-    if (publishCommentOptions.content) {
+    if (publishCommentOptions.content && triggerPublishComment) {
       (async () => {
         await publishComment();
         resetFields();
       })();
     }
-  }, [publishCommentOptions]);
+  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
   
   
   const getChallengeAnswersFromUser = async (challenges) => {

src/components/views/Catalog.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, Fragment } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import InfiniteScroll from 'react-infinite-scroller';
 import { Link, useNavigate, useParams } from 'react-router-dom';
@@ -51,6 +51,8 @@ const Catalog = () => {
   const [errorMessage, setErrorMessage] = useState(null);
   useError(errorMessage, [errorMessage]);
 
+  const [triggerPublishComment, setTriggerPublishComment] = useState(false);
+
   // temporary title from JSON, gets subplebbitAddress from URL
   useEffect(() => {
     setSelectedAddress(subplebbitAddress);
@@ -136,7 +138,7 @@ const Catalog = () => {
   }, [index, navigate, setPendingCommentIndex]);
 
   
-  const resetFields = () => {
+  const resetFields = useCallback(() => {
     if (nameRef.current) {
       nameRef.current.value = '';
     }
@@ -149,7 +151,7 @@ const Catalog = () => {
     if (linkRef.current) {
       linkRef.current.value = '';
     }
-  };
+  }, []);
 
 
   const handleSubmit = async (event) => {
@@ -164,17 +166,19 @@ const Catalog = () => {
       content: commentRef.current.value || undefined,
       link: linkRef.current.value || undefined,
     }));
+
+    setTriggerPublishComment(true);
   };
   
   
   useEffect(() => {
-    if (publishCommentOptions.content) {
+    if (publishCommentOptions.content && triggerPublishComment) {
       (async () => {
         await publishComment();
         resetFields();
       })();
     }
-  }, [publishCommentOptions]);
+  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
   
   
   const getChallengeAnswersFromUser = async (challenges) => {

src/components/views/Thread.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
@@ -65,6 +65,8 @@ const Thread = () => {
   const [errorMessage, setErrorMessage] = useState(null);
   useError(errorMessage, [errorMessage]);
 
+  const [triggerPublishComment, setTriggerPublishComment] = useState(false);
+
 
   const flattenedReplies = useMemo(() => 
     flattenCommentsPages(comment.replies), [comment.replies]
@@ -170,7 +172,7 @@ const Thread = () => {
   }, [index, setPendingCommentIndex]);
 
   
-  const resetFields = () => {
+  const resetFields = useCallback(() => {
     if (nameRef.current) {
       nameRef.current.value = '';
     }
@@ -180,7 +182,7 @@ const Thread = () => {
     if (linkRef.current) {
       linkRef.current.value = '';
     }
-  };
+  }, []);
 
 
   const handleSubmit = async (event) => {
@@ -195,17 +197,19 @@ const Thread = () => {
       link: linkRef.current.value || undefined,
       parentCid: selectedThread,
     }));
+
+    setTriggerPublishComment(true);
   };
   
   
   useEffect(() => {
-    if (publishCommentOptions.content) {
+    if (publishCommentOptions.content && triggerPublishComment) {
       (async () => {
         await publishComment();
         resetFields();
       })();
     }
-  }, [publishCommentOptions]);
+  }, [publishCommentOptions, triggerPublishComment, publishComment, resetFields]);
 
 
   const getChallengeAnswersFromUser = async (challenges) => {