we have to dispatch two different actions on two different event listeners which are triggering at the same click event. which is causing unnecessary re-rendering of the component. Here, updateTree is being called on onChange event. onVisibilityToggle is also being called at the same time. we are reading the data from redux store and consuming inside component.
const hierarchyTreeData = useSelector((state) => state.hierarchyManagement.hierarchyList);
const updateTree = (newData) => {
if (!isLoading && !isHierarchyLoading) {
//This action is updating the hierarchyList in store
dispatch(updateData(newData));
}
};
const onVisibilityToggle = ({
expanded,
node
}) => {
setSelectedNodeKey(node.id);
if (expanded) {
if (node ? .hierarchallist_uuid) {
dispatch(getHierarchyListByIdDetail(node ? .hierarchallist_uuid));
}
}
};
<
Tree
treeData = {
hierarchyTreeData
}
onChange = {
(newData) => updateTree(newData)
}
getNodeKey = {
({
node
}) => node.id
}
renderNodeContent = {
renderNodeContent
}
selectedNodeKey = {
selectedNodeKey
}
getNodeButtons = {
getNodeButtons
}
onRemoveNodeClick = {
onRemoveNodeClick
}
onAddNodeClick = {
onAddNodeClick
}
onNodeClick = {
onNodeClick
}
isNodeSelectable = {
true
}
readOnly = {
readOnly
}
canDrag = {
false
}
onVisibilityToggle = {
onVisibilityToggle
}
/>