From d6e2cb7cef46ec958b7123b3693c78f89f9796fa Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 10 Jan 2024 15:29:20 +1100
Subject: [PATCH] fix(ui): use memoized selector for workflow watcher

Minor perf improvement.
---
 .../features/nodes/hooks/useWorkflowWatcher.ts    | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/hooks/useWorkflowWatcher.ts b/invokeai/frontend/web/src/features/nodes/hooks/useWorkflowWatcher.ts
index 3092c1e6ce..1a67d45b21 100644
--- a/invokeai/frontend/web/src/features/nodes/hooks/useWorkflowWatcher.ts
+++ b/invokeai/frontend/web/src/features/nodes/hooks/useWorkflowWatcher.ts
@@ -1,4 +1,7 @@
+import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
+import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
+import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
 import type { WorkflowV2 } from 'features/nodes/types/workflow';
 import type { BuildWorkflowArg } from 'features/nodes/util/workflow/buildWorkflow';
 import { buildWorkflowFast } from 'features/nodes/util/workflow/buildWorkflow';
@@ -12,12 +15,14 @@ const debouncedBuildWorkflow = debounce((arg: BuildWorkflowArg) => {
   $builtWorkflow.set(buildWorkflowFast(arg));
 }, 300);
 
+const selectWorkflowSlices = createSelector(
+  selectNodesSlice,
+  selectWorkflowSlice,
+  (nodes, workflow) => ({ nodes: nodes.nodes, edges: nodes.edges, workflow })
+);
+
 export const useWorkflowWatcher = () => {
-  const buildWorkflowArg = useAppSelector(({ nodes, workflow }) => ({
-    nodes: nodes.nodes,
-    edges: nodes.edges,
-    workflow,
-  }));
+  const buildWorkflowArg = useAppSelector(selectWorkflowSlices);
 
   useEffect(() => {
     debouncedBuildWorkflow(buildWorkflowArg);