diff --git a/web/common/src/components/Lineage/LineageLayoutBase.tsx b/web/common/src/components/Lineage/LineageLayoutBase.tsx
index 45c4db8116..612bdcbb15 100644
--- a/web/common/src/components/Lineage/LineageLayoutBase.tsx
+++ b/web/common/src/components/Lineage/LineageLayoutBase.tsx
@@ -194,7 +194,7 @@ export function LineageLayoutBase<
     }
   }, [selectedNodeId, selectedNode])
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const selectedNodes = new Set<TNodeID>(connectedNodes.map(node => node.id))
     const selectedEdges = new Set(
       connectedEdges.reduce((acc, edge) => {
@@ -216,7 +216,7 @@ export function LineageLayoutBase<
     setSelectedEdges(selectedEdges)
   }, [connectedNodes, connectedEdges])
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     zoomToSelectedNode()
   }, [zoomToSelectedNode])