global State and local variable: take treeData as example

[xp1632]

We have two treeData in the code:

1. The first one we use it in the useState, here we give an initial state of the treeData state variable, which is the treeData we get from nodeConfigs

  const [treeData, setTreeData] = useState<TreeItemData[]>(
    nodeConfigsToTreeData(nodeConfigRegistry.getAllNodeConfigs())
  );

2. And inside the useEffect, we define a local variable treeData,
   • we pass this treeData also with nodeConfigsTreeData to our Filter function searchTreeDataWithHandleDataType
   • and update the treeData by the function's return value

- Here is quite essential, because before the searchTreeDataWithHandleDataType() has no return value - and the treeData we used in the filter function is the global 'treeData'

• after we have a local variable treeData , we could modify in if without interrupting the global 'treeData'
• and no matter what we setTreeData([...treeData, commandsToTreeData])
• This is exactly, adding commandTreeData only after filtering(when we need filter)

• ---

  Former Mistakes:

• **before in our filter function,
  1. we don't take in treeData as params, but use the global treeData from body directly, making the function 'leaking'
  2. we setTreeData in filterFunction directly, and this would infect global treedata
  3. After adding a local variable, we could do the filtering and only affect local
  4. And we can set the FilteredTreeData only when we want**

---

useEffect(() => {
    let treeData = nodeConfigsToTreeData(
      nodeConfigRegistry.getAllNodeConfigs()
    );
    if (startHandleInfo?.handleType && startHandleInfo?.handleDataType) {
      treeData = searchTreeDataWithHandleDataType(
        startHandleInfo.handleType,
        startHandleInfo?.handleDataType,
        treeData
      );
    }
    setTreeData(
      [...treeData, ...commandsToTreeData(commands)].sort(
        (a, b) => (a.rank ?? Infinity) - (b.rank ?? Infinity)
      )
    );
  }, [commands]);

[xp1632]