improvement(execution): use individual selectors to avoid unnecessary re-renders from unselectored store hook

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -115,7 +115,7 @@ export const ActionBar = memo(
 
     const { activeWorkflowId } = useWorkflowRegistry()
     const { isExecuting } = useCurrentWorkflowExecution()
-    const { getLastExecutionSnapshot } = useExecutionStore()
+    const getLastExecutionSnapshot = useExecutionStore((s) => s.getLastExecutionSnapshot)
     const userPermissions = useUserPermissionsContext()
     const edges = useWorkflowStore((state) => state.edges)
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts

@@ -114,19 +114,17 @@ export function useWorkflowExecution() {
   const { getVariablesByWorkflowId, variables } = useVariablesStore()
   const { isExecuting, isDebugging, pendingBlocks, executor, debugContext } =
     useCurrentWorkflowExecution()
-  const {
-    setIsExecuting,
-    setIsDebugging,
-    setPendingBlocks,
-    setExecutor,
-    setDebugContext,
-    setActiveBlocks,
-    setBlockRunStatus,
-    setEdgeRunStatus,
-    setLastExecutionSnapshot,
-    getLastExecutionSnapshot,
-    clearLastExecutionSnapshot,
-  } = useExecutionStore()
+  const setIsExecuting = useExecutionStore((s) => s.setIsExecuting)
+  const setIsDebugging = useExecutionStore((s) => s.setIsDebugging)
+  const setPendingBlocks = useExecutionStore((s) => s.setPendingBlocks)
+  const setExecutor = useExecutionStore((s) => s.setExecutor)
+  const setDebugContext = useExecutionStore((s) => s.setDebugContext)
+  const setActiveBlocks = useExecutionStore((s) => s.setActiveBlocks)
+  const setBlockRunStatus = useExecutionStore((s) => s.setBlockRunStatus)
+  const setEdgeRunStatus = useExecutionStore((s) => s.setEdgeRunStatus)
+  const setLastExecutionSnapshot = useExecutionStore((s) => s.setLastExecutionSnapshot)
+  const getLastExecutionSnapshot = useExecutionStore((s) => s.getLastExecutionSnapshot)
+  const clearLastExecutionSnapshot = useExecutionStore((s) => s.clearLastExecutionSnapshot)
   const [executionResult, setExecutionResult] = useState<ExecutionResult | null>(null)
   const executionStream = useExecutionStream()
   const currentChatExecutionIdRef = useRef<string | null>(null)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -741,7 +741,7 @@ const WorkflowContent = React.memo(() => {
   )
 
   const { activeBlockIds, pendingBlocks, isDebugging, isExecuting } = useCurrentWorkflowExecution()
-  const { getLastExecutionSnapshot } = useExecutionStore()
+  const getLastExecutionSnapshot = useExecutionStore((s) => s.getLastExecutionSnapshot)
 
   const [dragStartParentId, setDragStartParentId] = useState<string | null>(null)