Shift conditional render out of subblock

Author: Theodore Li

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx

@@ -52,9 +52,6 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import type { SubBlockConfig } from '@/blocks/types'
-import { useWorkspaceCredential } from '@/hooks/queries/credentials'
-import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { useWebhookManagement } from '@/hooks/use-webhook-management'
 
 const SLACK_OVERRIDES: SelectorOverrides = {
@@ -618,36 +615,6 @@ function SubBlockComponent({
     previewContextValues: contextValues,
   })
 
-  // Credential-type visibility gate: reactively fetches the credential by ID
-  // and hides the field unless it matches the required type.
-  const credTypeCond = config.credentialTypeCondition
-  const activeWfId = useWorkflowRegistry((s) => (credTypeCond ? s.activeWorkflowId : null))
-
-  const watchedCredentialId = useSubBlockStore(
-    useCallback(
-      (state) => {
-        if (!credTypeCond || !activeWfId) return ''
-        const blockValues = state.workflowValues[activeWfId]?.[blockId] ?? {}
-        const merged = { ...(dependencyContext ?? {}), ...blockValues }
-        for (const field of credTypeCond.watchFields) {
-          const val = merged[field]
-          if (val && typeof val === 'string') return val
-        }
-        return ''
-      },
-      [credTypeCond, activeWfId, blockId, dependencyContext]
-    )
-  )
-
-  const { data: watchedCredential } = useWorkspaceCredential(
-    watchedCredentialId || undefined,
-    Boolean(credTypeCond && watchedCredentialId)
-  )
-
-  if (credTypeCond && watchedCredential?.type !== credTypeCond.requiredType) {
-    return <></> as unknown as JSX.Element
-  }
-
   const isDisabled = gatedDisabled
 
   /**

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-editor-subblock-layout.ts

@@ -7,11 +7,66 @@ import {
   isSubBlockVisibleForMode,
 } from '@/lib/workflows/subblocks/visibility'
 import type { BlockConfig, SubBlockConfig, SubBlockType } from '@/blocks/types'
+import { useWorkspaceCredential } from '@/hooks/queries/credentials'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
+import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 import { mergeSubblockState } from '@/stores/workflows/utils'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
+/**
+ * Evaluates reactive conditions for subblocks. Always calls the same hooks
+ * regardless of whether a reactive condition exists (Rules of Hooks).
+ *
+ * Returns a Set of subblock IDs that should be hidden.
+ */
+function useReactiveConditions(
+  subBlocks: SubBlockConfig[],
+  blockId: string,
+  activeWorkflowId: string | null,
+  blockSubBlockValues: Record<string, unknown>
+): Set<string> {
+  const reactiveSubBlock = useMemo(
+    () => subBlocks.find((sb) => sb.reactiveCondition),
+    [subBlocks]
+  )
+  const reactiveCond = reactiveSubBlock?.reactiveCondition
+
+  // Subscribe to watched field values — always called (stable hook count)
+  const watchedCredentialId = useSubBlockStore(
+    useCallback(
+      (state) => {
+        if (!reactiveCond || !activeWorkflowId) return ''
+        const blockValues = state.workflowValues[activeWorkflowId]?.[blockId] ?? {}
+        const merged = { ...blockSubBlockValues, ...blockValues }
+        for (const field of reactiveCond.watchFields) {
+          const val = merged[field]
+          if (val && typeof val === 'string') return val
+        }
+        return ''
+      },
+      [reactiveCond, activeWorkflowId, blockId, blockSubBlockValues]
+    )
+  )
+
+  // Always call useWorkspaceCredential (stable hook count), disable when not needed
+  const { data: credential } = useWorkspaceCredential(
+    watchedCredentialId || undefined,
+    Boolean(reactiveCond && watchedCredentialId)
+  )
+
+  return useMemo(() => {
+    const hidden = new Set<string>()
+    if (!reactiveSubBlock || !reactiveCond) return hidden
+
+    const conditionMet = credential?.type === reactiveCond.requiredType
+    if (!conditionMet) {
+      hidden.add(reactiveSubBlock.id)
+    }
+    return hidden
+  }, [reactiveSubBlock, reactiveCond, credential?.type])
+}
+
 /**
  * Custom hook for computing subblock layout in the editor panel.
  * Determines which subblocks should be visible based on mode, conditions, and feature flags.
@@ -39,6 +94,14 @@ export function useEditorSubblockLayout(
   )
   const { config: permissionConfig } = usePermissionConfig()
 
+  // Evaluate reactive conditions (hooks-based, must be called before useMemo)
+  const hiddenByReactiveCondition = useReactiveConditions(
+    config?.subBlocks || [],
+    blockId,
+    activeWorkflowId,
+    blockSubBlockValues
+  )
+
   return useMemo(() => {
     // Guard against missing config or block selection
     if (!config || !Array.isArray((config as any).subBlocks) || !blockId) {
@@ -109,6 +172,9 @@ export function useEditorSubblockLayout(
     const visibleSubBlocks = (config.subBlocks || []).filter((block) => {
       if (block.hidden) return false
 
+      // Filter by reactive condition (evaluated via hooks before useMemo)
+      if (hiddenByReactiveCondition.has(block.id)) return false
+
       // Hide skill-input subblock when skills are disabled via permissions
       if (block.type === 'skill-input' && permissionConfig.disableSkills) return false
 
@@ -164,6 +230,7 @@ export function useEditorSubblockLayout(
     activeWorkflowId,
     isSnapshotView,
     blockDataFromStore,
+    hiddenByReactiveCondition,
     permissionConfig.disableSkills,
   ])
 }

apps/sim/blocks/types.ts

@@ -357,16 +357,19 @@ export interface SubBlockConfig {
         }
       })
   /**
-   * Declarative credential-type visibility gate. The SubBlock watches the specified
-   * fields for a credential ID, fetches the credential via React Query, and hides
-   * the field unless the credential type matches.
+   * Reactive visibility condition evaluated via hooks at the layout level.
    *
-   * Works in both block editor and tool-input contexts without side effects.
+   * - `watchFields`: subblock IDs whose values to watch. The first non-empty string
+   *    value is used as a credential ID to look up via the workspace credentials API.
+   * - `requiredType`: the credential type that must match for the field to be visible
+   *    (e.g. `'service_account'`).
+   *
+   * The layout hook calls `useWorkspaceCredential` (always, for stable hook count)
+   * and filters the subblock out if the type doesn't match. The serializer skips
+   * this check — it always serializes the field if it has a value.
    */
-  credentialTypeCondition?: {
-    /** Subblock IDs (or canonical param IDs) to read the credential ID from, in priority order. */
+  reactiveCondition?: {
     watchFields: string[]
-    /** Required credential type for the field to be visible (e.g. 'service_account'). */
     requiredType: string
   }
   // Props specific to 'code' sub-block type

apps/sim/blocks/utils.ts

@@ -10,9 +10,8 @@ import { useProvidersStore } from '@/stores/providers/store'
 
 /**
  * Standard subblocks for Google service account impersonation.
- * The `impersonateUserEmail` field fetches the credential by ID to check if it's
- * a service account, using `asyncCondition` so it works in both block editor and
- * agent tool-input contexts without cross-subblock state propagation.
+ * Uses a reactive condition that fetches the credential by ID to check if it's
+ * a service account — works in both block editor and agent tool-input contexts.
  */
 export const SERVICE_ACCOUNT_SUBBLOCKS: SubBlockConfig[] = [
   {
@@ -21,7 +20,7 @@ export const SERVICE_ACCOUNT_SUBBLOCKS: SubBlockConfig[] = [
     type: 'short-input',
     placeholder: 'Email to impersonate (for service accounts)',
     paramVisibility: 'user-only',
-    credentialTypeCondition: {
+    reactiveCondition: {
       watchFields: ['credential', 'oauthCredential', 'manualCredential'],
       requiredType: 'service_account',
     },

apps/sim/tools/params.ts

@@ -990,9 +990,9 @@ export function getSubBlocksForToolInput(
       if (visibility === 'hidden' || visibility === 'llm-only') continue
 
       // Evaluate condition against current values.
-      // Skip sync condition check for subblocks with credentialTypeCondition — visibility
-      // is handled at render time by the SubBlock component via React Query.
-      if (sb.condition && !sb.credentialTypeCondition) {
+      // Skip sync condition check for subblocks with reactiveCondition — visibility
+      // is handled at render time by the SubBlock component.
+      if (sb.condition && !sb.reactiveCondition) {
         const conditionMet = evaluateSubBlockCondition(
           sb.condition as SubBlockCondition,
           valuesWithOperation