changed useFlow declaration from destructuring to selector to improve performance

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -72,7 +72,10 @@ export default function ParameterComponent({
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   const { tabId, flows } = useContext(FlowsContext);
-  const { nodes, edges, setNode } = useFlow();
+  const nodes = useFlow((state) => state.nodes);
+  const edges = useFlow((state) => state.edges);
+  const setNode = useFlow((state) => state.setNode);
+
 
   const flow = flows.find((flow) => flow.id === tabId)?.data?.nodes ?? null;
 

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -30,7 +30,8 @@ export default function GenericNode({
   yPos: number;
 }): JSX.Element {
   const { types } = useContext(typesContext);
-  const { deleteNode, setNode } = useFlow();
+  const deleteNode = useFlow((state) => state.deleteNode);
+  const setNode = useFlow((state) => state.setNode);
   const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
   const [inputName, setInputName] = useState(false);
   const [nodeName, setNodeName] = useState(data.node!.display_name);

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -26,7 +26,8 @@ export default function BuildTrigger({
 }): JSX.Element {
   const { updateSSEData, isBuilding, setIsBuilding, sseData } = useSSE();
   const { setTabsState, saveFlow } = useContext(FlowsContext);
-  const { nodes, edges } = useFlow();
+  const nodes = useFlow((state) => state.nodes);
+  const edges = useFlow((state) => state.edges);
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const [isIconTouched, setIsIconTouched] = useState(false);
   const eventClick = isBuilding ? "pointer-events-none" : "";

src/frontend/src/components/chatComponent/index.tsx

@@ -14,7 +14,9 @@ import useFlow from "../../stores/flowManagerStore";
 export default function Chat({ flow }: ChatType): JSX.Element {
   const [open, setOpen] = useState(false);
   const [canOpen, setCanOpen] = useState(false);
-  const { isBuilt, setIsBuilt, isPending } = useFlow();
+  const isBuilt = useFlow((state) => state.isBuilt);
+  const setIsBuilt = useFlow((state) => state.setIsBuilt);
+  const isPending = useFlow((state) => state.isPending);
   const { tabsState } =
     useContext(FlowsContext);
 

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -55,7 +55,8 @@ export default function CodeTabsComponent({
   const [openAccordion, setOpenAccordion] = useState<string[]>([]);
   const {dark} = useDarkStore();
 
-  const { setNodes } = useFlow();
+  const setNodes = useFlow((state) => state.setNodes);
+
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
 
   useEffect(() => {

src/frontend/src/contexts/flowsContext.tsx

@@ -104,7 +104,11 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
   const { setData } = useContext(typesContext);
   const [tabsState, setTabsState] = useState<FlowsState>({});
 
-  const {nodes, edges, paste, setPending, reactFlowInstance} = useFlow();
+  const nodes = useFlow((state) => state.nodes);
+  const edges = useFlow((state) => state.edges);
+  const reactFlowInstance = useFlow((state) => state.reactFlowInstance);
+  const setPending = useFlow((state) => state.setPending);
+  const paste = useFlow((state) => state.paste);
 
   function refreshFlows() {
     setIsLoading(true);

src/frontend/src/contexts/undoRedoContext.tsx

@@ -32,7 +32,10 @@ export function UndoRedoProvider({ children }) {
   const { tabId, flows } =
     useContext(FlowsContext);
 
-  const {setNodes, setEdges, nodes, edges} = useFlow();
+  const setNodes = useFlow((state) => state.setNodes);
+  const setEdges = useFlow((state) => state.setEdges);
+  const nodes = useFlow((state) => state.nodes);
+  const edges = useFlow((state) => state.edges);
 
   const [past, setPast] = useState<HistoryItem[][]>(flows.map(() => []));
   const [future, setFuture] = useState<HistoryItem[][]>(flows.map(() => []));

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -57,7 +57,10 @@ const EditNodeModal = forwardRef(
   ) => {
     const [myData, setMyData] = useState(data);
 
-    const { setPending, edges, setNode } = useFlow();
+    const setPending = useFlow((state) => state.setPending);
+    const edges = useFlow((state) => state.edges);
+    const setNode = useFlow((state) => state.setNode);
+    
     const { setModalContextOpen } = useContext(alertContext);
 
     function changeAdvanced(n) {

src/frontend/src/modals/formModal/index.tsx

@@ -39,7 +39,8 @@ export default function FormModal({
   flow: FlowType;
 }): JSX.Element {
   const { tabsState, setTabsState } = useContext(FlowsContext);
-  const { nodes, edges } = useFlow();
+  const nodes = useFlow((state) => state.nodes);
+  const edges = useFlow((state) => state.edges);
   const [chatValue, setChatValue] = useState(() => {
     try {
       const { formKeysData } = tabsState[flow.id];

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -63,22 +63,20 @@ export default function Page({
 
   const { takeSnapshot } = useContext(undoRedoContext);
 
-  const {
+  const reactFlowInstance = useFlow((state) => state.reactFlowInstance);
-    reactFlowInstance,
+  const setReactFlowInstance = useFlow((state) => state.setReactFlowInstance);
-    setReactFlowInstance,
+  const nodes = useFlow((state) => state.nodes);
-    nodes,
+  const edges = useFlow((state) => state.edges);
-    edges,
+  const onNodesChange = useFlow((state) => state.onNodesChange);
-    onNodesChange,
+  const onEdgesChange = useFlow((state) => state.onEdgesChange);
-    onEdgesChange,
+  const onConnect = useFlow((state) => state.onConnect);
-    onConnect,
+  const setNodes = useFlow((state) => state.setNodes);
-    setNodes,
+  const setEdges = useFlow((state) => state.setEdges);
-    setEdges,
+  const deleteNode = useFlow((state) => state.deleteNode);
-    deleteNode,
+  const deleteEdge = useFlow((state) => state.deleteEdge);
-    deleteEdge,
+  const setPending = useFlow((state) => state.setPending);
-    setPending,
+  const isPending = useFlow((state) => state.isPending);
-    isPending,
+  const paste = useFlow((state) => state.paste);
-    paste,
-  } = useFlow();
 
   const position = useRef({ x: 0, y: 0 });
   const [lastSelection, setLastSelection] =

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -35,7 +35,8 @@ export default function ExtraSidebar(): JSX.Element {
   const hasApiKey = useStoreStore((state) => state.hasApiKey);
   const validApiKey = useStoreStore((state) => state.validApiKey);
 
-  const { isBuilt, isPending } = useFlow();
+  const isBuilt = useFlow((state) => state.isBuilt);
+  const isPending = useFlow((state) => state.isPending);
   const { setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -66,7 +66,11 @@ export default function NodeToolbarComponent({
   const isMinimal = canMinimize();
   const isGroup = data.node?.flow ? true : false;
 
-  const { paste, nodes, edges, setNodes, setEdges } = useFlow();
+  const paste = useFlow((state) => state.paste);
+  const nodes = useFlow((state) => state.nodes);
+  const edges = useFlow((state) => state.edges);
+  const setNodes = useFlow((state) => state.setNodes);
+  const setEdges = useFlow((state) => state.setEdges);
 
   const { saveComponent, flows, version } = useContext(FlowsContext);
   const { takeSnapshot } = useContext(undoRedoContext);