Tree component data structure - it can be better

[alysonvilela]

Proposal: Improve Tree Component Efficiency in JollyUI

Suggestion

I love that JollyUI made this component! I've been using my custom tree structure for years, and this is the first time I've seen something like it in a UI library. That said, I think it could be even better with a small change.

Right now, the Tree component uses a deeply nested structure. A more efficient approach is to use a flat structure with childIds, as recommended by the React team.

Current Structure

let items = [
  { id: 1, title: "Documents", children: [
      { id: 2, title: "Project", children: [
          { id: 3, title: "Weekly Report", children: [] }
      ]}
  ]},
  { id: 4, title: "Photos", children: [
      { id: 5, title: "Image 1", children: [] },
      { id: 6, title: "Image 2", children: [] }
  ]}
];

Recommended Structure

export const treeData = {
  1: { id: 1, title: "Documents", childIds: [2] },
  2: { id: 2, title: "Project", childIds: [3] },
  3: { id: 3, title: "Weekly Report", childIds: [] },
  4: { id: 4, title: "Photos", childIds: [5, 6] },
  5: { id: 5, title: "Image 1", childIds: [] },
  6: { id: 6, title: "Image 2", childIds: [] }
};

Why Change?

• More Efficient: Works better with recursive components.
• Recommended by React: Aligns with best practices.
• Simpler Updates: Easier to modify state.

Switching to this structure improves performance and maintainability while keeping the great functionality JollyUI already provides!

Refs:
https://react.dev/learn/choosing-the-state-structure

[Lorde4Avalon]

The flat data structure is a good option most of the time, but it looks like the current data structure follows RAC , need to think more about improving efficiency while dealing with the lack of compatibility with RAC.
Personally, I think the tree data structure is more suitable for the Tree component, which needs hierarchical clarity.