diff --git a/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx b/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx
index 703e9328e..b658accec 100644
--- a/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx
+++ b/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, FC, useEffect, useMemo, useRef } from 'react';
+import React, { createContext, FC, useMemo, useRef } from 'react';
 import {
 	buildProxiedInstance,
 	FeatureImplementation,
@@ -64,6 +64,22 @@ export type ITagsListProps = {
 	contextMenu: TagContextMenuCallbacks;
 };
 
+/**
+ * Rebuild the tree while rendering, before rendering child components,
+ * otherwise they may use a stale tree that is out of sync with the latest tags list
+ */
+const useRebuildTreeOnTagsChange = (
+	tree: { rebuildTree: () => void },
+	tags: Record<string, TagNode>,
+) => {
+	const prevTagsRef = useRef(tags);
+	if (prevTagsRef.current !== tags) {
+		prevTagsRef.current = tags;
+
+		tree.rebuildTree();
+	}
+};
+
 export const TagsTree: FC<ITagsListProps> = ({
 	tags,
 	activeTag,
@@ -118,9 +134,7 @@ export const TagsTree: FC<ITagsListProps> = ({
 	});
 
 	// Rebuild tree by changes
-	useEffect(() => {
-		tree.rebuildTree();
-	}, [tags, tree]);
+	useRebuildTreeOnTagsChange(tree, tags);
 
 	return (
 		<TagsListContext value={context}>