Merge pull request #274 from liam-hq/remove-use-effect

refactor: reduce useEffect usage in ERDContent component

frontend/.changeset/neat-squids-brush.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+refactor: reduce useEffect

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx

@@ -10,7 +10,7 @@ import {
   useEdgesState,
   useNodesState,
 } from '@xyflow/react'
-import { type FC, useCallback, useEffect } from 'react'
+import { type FC, useCallback } from 'react'
 import styles from './ERDContent.module.css'
 import { ERDContentProvider, useERDContentContext } from './ERDContentContext'
 import { RelationshipEdge } from './RelationshipEdge'
@@ -59,18 +59,13 @@ export const ERDContentInner: FC<Props> = ({
   edges: _edges,
   enabledFeatures,
 }) => {
-  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([])
-  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([])
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>(_nodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>(_edges)
   const { relationships } = useDBStructureStore()
   const {
     state: { loading },
   } = useERDContentContext()
 
-  useEffect(() => {
-    setNodes(_nodes)
-    setEdges(_edges)
-  }, [_nodes, _edges, setNodes, setEdges])
-
   useInitialAutoLayout()
   useActiveTableNameFromUrl()
   useFitViewWhenActiveTableChange(

frontend/packages/erd-core/src/components/ERDRenderer/ERDRenderer.tsx

@@ -40,7 +40,7 @@ export const ERDRenderer: FC = () => {
                   <SidebarTrigger />
                 </div>
                 <TableDetailDrawerRoot>
-                  <ERDContent nodes={nodes} edges={edges} />
+                  <ERDContent key={nodes.length} nodes={nodes} edges={edges} />
                   <div className={styles.toolbarWrapper}>
                     <Toolbar />
                   </div>