Use variable instead of useEffect

components/wallet-logger.js

@@ -1,5 +1,5 @@
 import LogMessage from './log-message'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import styles from '@/styles/log.module.css'
 import { Button } from 'react-bootstrap'
 import { useToast } from './toast'
@@ -273,16 +273,13 @@ export function useWalletLogs (wallet, initialPage = 1, logsPerPage = 10) {
     }
   }, [logs, loadLogsPage, wallet])
 
-  useEffect(() => {
-    // make sure 'more' button is removed if logs are deleted
-    if (logs.length === 0) setHasMore(false)
-  }, [logs?.length])
-
   useInterval(() => {
     loadNew().catch(console.error)
   }, 1_000, [loadNew])
 
-  return { logs, hasMore, loadMore, setLogs, loading }
+  // make sure 'more' button is removed if logs are deleted
+  const nextHasMore = logs?.length !== 0 && hasMore
+  return { logs, hasMore: nextHasMore, loadMore, setLogs, loading }
 }
 
 function uniqueSort (logs) {