I am using Antd's Tree component which takes left half of my container and the data is quite big. OnClick of any of the node, I render some details regarding the node on right half inside the container. So I load all the nodes at ones and onClick I maintain a state variable with details of the clicked node. Now since the data is big, I thought that memoizing this Tree's Functional component, I could avoid the rerender of the whole tree onClick of the node, which I am able to achieve using useMemo() but since I manage the selection of the node using Tree's prop "selectedKeys={props.selkeys}", the selection doesnt work but I am able to achieve that onClick the re-render doesnt happen. That is because the useMemo looks like below
useMemo(
() => (myTreeComp, [props.data]))
and if the change the useMemeo to include the selected keys also, then there is no point of memoize as it needs to rerender because the nodeselection has changed:
useMemo(
() => (myTreeComp, [props.data, props.selectedkeys]))
Since this is an existing code, i am not sure how can I solve this which not much changes.
I am also open to any other solution for this like some way to show only little data but please note all the data is loaded in a state. But please suggest any better solution.
OR
Please advice on how to use infinite-scroller or other such components with this Tree. I can't because the Tree can have only TreeNodes. Please advise.
TIA