From 503e7766ba2287677b1bc7ad649ec49a34dcca29 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Fri, 5 Jan 2024 11:49:07 -0300 Subject: [PATCH] changed useFlow declaration from destructuring to selector to improve performance --- .../components/parameterComponent/index.tsx | 5 +++- .../src/CustomNodes/GenericNode/index.tsx | 3 +- .../chatComponent/buildTrigger/index.tsx | 3 +- .../src/components/chatComponent/index.tsx | 4 ++- .../components/codeTabsComponent/index.tsx | 3 +- src/frontend/src/contexts/flowsContext.tsx | 6 +++- src/frontend/src/contexts/undoRedoContext.tsx | 5 +++- .../src/modals/EditNodeModal/index.tsx | 5 +++- src/frontend/src/modals/formModal/index.tsx | 3 +- .../components/PageComponent/index.tsx | 30 +++++++++---------- .../extraSidebarComponent/index.tsx | 3 +- .../components/nodeToolbarComponent/index.tsx | 6 +++- 12 files changed, 49 insertions(+), 27 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index fc0ed31a9..5ef37cf08 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/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; diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 6d343f9cd..647494b6c 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/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); diff --git a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx b/src/frontend/src/components/chatComponent/buildTrigger/index.tsx index 65531e995..26ccd61ff 100644 --- a/src/frontend/src/components/chatComponent/buildTrigger/index.tsx +++ b/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" : ""; diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx index b07732a64..e07c6660e 100644 --- a/src/frontend/src/components/chatComponent/index.tsx +++ b/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); diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx index e4e4bbb60..6e56b91d3 100644 --- a/src/frontend/src/components/codeTabsComponent/index.tsx +++ b/src/frontend/src/components/codeTabsComponent/index.tsx @@ -55,7 +55,8 @@ export default function CodeTabsComponent({ const [openAccordion, setOpenAccordion] = useState([]); const {dark} = useDarkStore(); - const { setNodes } = useFlow(); + const setNodes = useFlow((state) => state.setNodes); + const [errorDuplicateKey, setErrorDuplicateKey] = useState(false); useEffect(() => { diff --git a/src/frontend/src/contexts/flowsContext.tsx b/src/frontend/src/contexts/flowsContext.tsx index 97cdfc77b..434b91619 100644 --- a/src/frontend/src/contexts/flowsContext.tsx +++ b/src/frontend/src/contexts/flowsContext.tsx @@ -104,7 +104,11 @@ export function FlowsProvider({ children }: { children: ReactNode }) { const { setData } = useContext(typesContext); const [tabsState, setTabsState] = useState({}); - 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); diff --git a/src/frontend/src/contexts/undoRedoContext.tsx b/src/frontend/src/contexts/undoRedoContext.tsx index f4b50beb0..d26be404c 100644 --- a/src/frontend/src/contexts/undoRedoContext.tsx +++ b/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(flows.map(() => [])); const [future, setFuture] = useState(flows.map(() => [])); diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index d2e4a9e77..b086ed912 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/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) { diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx index 71115aef8..949ac4c2e 100644 --- a/src/frontend/src/modals/formModal/index.tsx +++ b/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]; diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 17777adcd..d510eafc6 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -63,22 +63,20 @@ export default function Page({ const { takeSnapshot } = useContext(undoRedoContext); - const { - reactFlowInstance, - setReactFlowInstance, - nodes, - edges, - onNodesChange, - onEdgesChange, - onConnect, - setNodes, - setEdges, - deleteNode, - deleteEdge, - setPending, - isPending, - paste, - } = useFlow(); + const reactFlowInstance = useFlow((state) => state.reactFlowInstance); + const setReactFlowInstance = useFlow((state) => state.setReactFlowInstance); + const nodes = useFlow((state) => state.nodes); + const edges = useFlow((state) => state.edges); + const onNodesChange = useFlow((state) => state.onNodesChange); + const onEdgesChange = useFlow((state) => state.onEdgesChange); + const onConnect = useFlow((state) => state.onConnect); + const setNodes = useFlow((state) => state.setNodes); + const setEdges = useFlow((state) => state.setEdges); + const deleteNode = useFlow((state) => state.deleteNode); + const deleteEdge = useFlow((state) => state.deleteEdge); + const setPending = useFlow((state) => state.setPending); + const isPending = useFlow((state) => state.isPending); + const paste = useFlow((state) => state.paste); const position = useRef({ x: 0, y: 0 }); const [lastSelection, setLastSelection] = diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 8c4468ae0..9601e6942 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/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(""); diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 97c2fd04e..5438f232b 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/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);