react-component / react-component/tree
Deprecation of `children` and more complex Trees
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 490
- Avg merge
- 3d 17h
- Merged PRs (30d)
- 5
Description
Hey there! First let me know if this is not the right place for discussions like this, I'm happy to move it elsewhere if so :)
Recently I've been working with a large Tree and with treeData I can think about two main ways of structuring it: 1. A memoized object derived from your tree dependencies; or 2. A Tree state / reducer with the triggers to update it (main case in docs). The problem I see/I'm facing with it is that it translates into a linear structure (coming from React / how hooks work), being transformed into a Tree:
function Component() {
const firstLevelData = useGetFirstLevelData(); // even more of a problem when these are async
const secondLevelData = useGetSecondLevelData();
// + any other dep to build the tree
const treeData = /* build tree, with everything needed inside this component */;
return <Tree treeData={treeData} />;
}
This got me thinking: the DOM itself is a Tree, so having it performant and with good ways to abstract it is part of the problem React had to solve, which makes React nodes potentially the best way of solving this:
function SecondLevelNode() {
const thirdLevelData = useGetThirdLevelData();
return <TreeNode />; // + any other Node component, can even be <LoadingNode /> when async for example
}
function FirstLevelNode() {
const secondLevelData = useGetSecondLevelData();
return <TreeNode>{secondLevelData.map(() => <SecondLevelNode />)}</TreeNode>
}
function Component() {
const firstLevelData = useGetFirstLevelData();
return <Tree>{firstLevelData.map(() => <FirstLevelNode />)}</Tree>
}
I know there's a deprecation note in https://github.com/react-component/tree/blob/7dbaebb3fa3ddead8b0a24284169a12133ca074e/src/Tree.tsx#L367 for the children prop (also it's not used in any example), which was added with #261. However virtualization seemed to still work when using it. So I'm wondering:
- Is there any limitation/issue for it to be deprecated?
- Does it make sense to keep supporting it for better structuring Trees with different dependencies for each level?
Thanks!!
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the deprecation note in src/Tree.tsx around line 367 and the change from #261. Then compare the children-based examples with the linked virtualization sandbox and trace how Tree and TreeNode content is handled. Done would require a decided position on continued children support and a concrete follow-up scope.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100