From f44321275180357e19dd17faf0f995bf393ebb84 Mon Sep 17 00:00:00 2001 From: Irina Katsyuta Date: Sun, 5 Jul 2026 14:44:10 +0200 Subject: [PATCH 1/3] fix: rebuild tree before render component where tree use --- .../features/MainScreen/TagsPanel/TagsTree.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx b/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx index 703e9328e..fda691f99 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, @@ -104,7 +104,10 @@ export const TagsTree: FC = ({ }, instanceBuilder: buildProxiedInstance, dataLoader: { - getItem: (itemId) => tags[itemId], + getItem: (itemId) => { + console.trace(); + return tags[itemId]; + }, getChildren: (itemId) => tags[itemId].children ?? [], }, canReorder: true, @@ -118,9 +121,14 @@ export const TagsTree: FC = ({ }); // Rebuild tree by changes - useEffect(() => { + // We need rebuild the tree before rendering child components, + // otherwise they may use a stale tree that is out of sync with the latest tags list + const prevTagsRef = useRef(tags); + if (prevTagsRef.current !== tags) { + prevTagsRef.current = tags; + tree.rebuildTree(); - }, [tags, tree]); + } return ( From f64a812448dd4bed5d6ce2ace2de458338d4c81b Mon Sep 17 00:00:00 2001 From: Irina Katsyuta Date: Sun, 5 Jul 2026 15:03:31 +0200 Subject: [PATCH 2/3] chore: remove console log --- packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx b/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx index fda691f99..c8c521668 100644 --- a/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx +++ b/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx @@ -104,10 +104,7 @@ export const TagsTree: FC = ({ }, instanceBuilder: buildProxiedInstance, dataLoader: { - getItem: (itemId) => { - console.trace(); - return tags[itemId]; - }, + getItem: (itemId) => tags[itemId], getChildren: (itemId) => tags[itemId].children ?? [], }, canReorder: true, From 2d18f8ec96b6f585a125a97a78a4010a887e7418 Mon Sep 17 00:00:00 2001 From: Irina Katsyuta Date: Tue, 7 Jul 2026 11:41:43 +0200 Subject: [PATCH 3/3] refactor: use hook to update tree --- .../MainScreen/TagsPanel/TagsTree.tsx | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx b/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx index c8c521668..b658accec 100644 --- a/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx +++ b/packages/app/src/features/MainScreen/TagsPanel/TagsTree.tsx @@ -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, +) => { + const prevTagsRef = useRef(tags); + if (prevTagsRef.current !== tags) { + prevTagsRef.current = tags; + + tree.rebuildTree(); + } +}; + export const TagsTree: FC = ({ tags, activeTag, @@ -118,14 +134,7 @@ export const TagsTree: FC = ({ }); // Rebuild tree by changes - // We need rebuild the tree before rendering child components, - // otherwise they may use a stale tree that is out of sync with the latest tags list - const prevTagsRef = useRef(tags); - if (prevTagsRef.current !== tags) { - prevTagsRef.current = tags; - - tree.rebuildTree(); - } + useRebuildTreeOnTagsChange(tree, tags); return (