diff --git a/webapp/packages/core-app/src/NavigationTree/ElementsTree.tsx b/webapp/packages/core-app/src/NavigationTree/ElementsTree.tsx index 845b473f1c..1a7d091e54 100644 --- a/webapp/packages/core-app/src/NavigationTree/ElementsTree.tsx +++ b/webapp/packages/core-app/src/NavigationTree/ElementsTree.tsx @@ -6,7 +6,8 @@ * you may not use this file except in compliance with the License. */ -import { observer, useLocalStore } from 'mobx-react'; +import { observer } from 'mobx-react'; +import { useMemo } from 'react'; import styled, { css } from 'reshadow'; import { Loader } from '@cloudbeaver/core-blocks'; @@ -53,12 +54,10 @@ export const ElementsTree: React.FC = observer(function ElementsTree({ const nodeChildren = useChildren(root); const Placeholder = emptyPlaceholder; - const context = useLocalStore(source => source, { - control, - onOpen, - onSelect, - isSelected, - }); + const context = useMemo( + () => ({ control, onOpen, onSelect, isSelected }), + [control, onOpen, onSelect, isSelected] + ); if (!nodeChildren.children || nodeChildren.children.length === 0) { if (nodeChildren.isLoading()) { diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx index f3e7a51812..90ebdf85f1 100644 --- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx +++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx @@ -6,8 +6,8 @@ * you may not use this file except in compliance with the License. */ -import { observer, useLocalStore } from 'mobx-react'; -import { useRef } from 'react'; +import { observer } from 'mobx-react'; +import { useMemo, useRef } from 'react'; import styled, { use } from 'reshadow'; import { useStyles } from '@cloudbeaver/core-theming'; @@ -50,7 +50,7 @@ export const TreeNode: React.FC = observer(function TreeNode({ handlersRef.current.onOpen?.(); }; - const nodeContext = useLocalStore(source => source, { + const nodeContext = useMemo(() => ({ loading, selected, expanded, @@ -58,16 +58,7 @@ export const TreeNode: React.FC = observer(function TreeNode({ expand: handleExpand, select: handleSelect, open: handleOpen, - }); - // const nodeContext = useMemo(() => ({ - // loading, - // selected, - // expanded, - // leaf, - // expand: handleExpand, - // select: handleSelect, - // open: handleOpen, - // }), [loading, selected, expanded, leaf, handleExpand, handleSelect, handleOpen]); + }), [loading, selected, expanded, leaf, handleExpand, handleSelect, handleOpen]); return styled(useStyles(TREE_NODE_STYLES))(