fix(logs): restore useEffect for async setActiveWorkflow and useMemo on rowProps

waleedlatif1 · waleedlatif1 · commit c19b4e80b22f · 2026-04-28T17:18:33.000-07:00
- resource-content.tsx: revert render-time setActiveWorkflow call to useEffect; the store action is async and performs network ops, calling it during render violates React purity
- logs-list.tsx: restore useMemo on rowProps to prevent virtualized list rows from re-rendering on every parent render
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { lazy, memo, Suspense, useMemo, useRef, useState } from 'react'
+import { lazy, memo, Suspense, useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { formatDuration } from '@sim/utils/formatting'
 import { Square } from 'lucide-react'
@@ -248,14 +248,9 @@ export function EmbeddedWorkflowActions({ workspaceId, workflowId }: EmbeddedWor
   )
   const { usageExceeded } = useUsageLimits()
 
-  // Keep the active workflow in the registry up-to-date whenever the embedded
-  // workflow changes. This is safe during render because the store setter does
-  // not trigger a synchronous re-render of this component.
-  const prevWorkflowIdRef = useRef<string | undefined>(undefined)
-  if (prevWorkflowIdRef.current !== workflowId) {
-    prevWorkflowIdRef.current = workflowId
-    setActiveWorkflow(workflowId)
-  }
+  useEffect(() => {
+    void setActiveWorkflow(workflowId)
+  }, [workflowId, setActiveWorkflow])
 
   const isRunButtonDisabled =
     !isExecuting && !effectivePermissions.canRead && !effectivePermissions.isLoading
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { formatDuration } from '@sim/utils/formatting'
 import { ArrowUpRight, Loader2 } from 'lucide-react'
 import Link from 'next/link'
@@ -288,16 +288,28 @@ export function LogsList({
 
   const itemCount = hasNextPage ? logs.length + 1 : logs.length
 
-  const rowProps: RowProps = {
-    logs,
-    selectedLogId,
-    onLogClick,
-    onLogHover,
-    onLogContextMenu,
-    selectedRowRef,
-    isFetchingNextPage,
-    loaderRef,
-  }
+  const rowProps = useMemo<RowProps>(
+    () => ({
+      logs,
+      selectedLogId,
+      onLogClick,
+      onLogHover,
+      onLogContextMenu,
+      selectedRowRef,
+      isFetchingNextPage,
+      loaderRef,
+    }),
+    [
+      logs,
+      selectedLogId,
+      onLogClick,
+      onLogHover,
+      onLogContextMenu,
+      selectedRowRef,
+      isFetchingNextPage,
+      loaderRef,
+    ]
+  )
 
   return (
     <div ref={containerRef} className='h-full w-full'>
