@rc-component/tree

@rc-component/tree is the low-level tree-view engine behind Ant Design’s Tree and TreeSelect components, distributed as a standalone package for any React application that needs to render hierarchical data. It handles the hard parts of tree UI on its own: flattening nested data into a virtualized row list, tracking expand/select/check state (including the parent-child propagation rules for checkboxes), and supporting drag-and-drop reordering with configurable drop rules.

Because the checkbox and expansion logic is centralized in shared utilities (conductCheck, treeUtil), the component stays correct even with checkStrictly mode, disabled nodes, and asynchronous loadData. Virtual scrolling is delegated to the sibling @rc-component/virtual-list package, so trees with thousands of nodes render only the visible rows rather than the full DOM tree.

Teams already building on Ant Design get this component for free via antd’s Tree, but @rc-component/tree is also a solid unstyled foundation for anyone rolling a custom file explorer, permission tree, org chart, or nested-category picker without pulling in a full design system.

What You Get

• A <Tree> component that accepts a treeData array and renders expandable, selectable nodes with minimal setup
• Virtual scrolling via @rc-component/virtual-list so trees with thousands of nodes stay performant
• Checkbox support with correct parent/child propagation, including a checkStrictly mode for independent node checking
• Built-in drag-and-drop with allowDrop, drop-position callbacks, and a customizable dropIndicatorRender
• Asynchronous node loading via loadData for lazily-fetched subtrees
• Full TypeScript definitions for tree data nodes, event payloads, and field-name remapping

Common Use Cases

• File/folder explorers where directories load their children on demand
• Permission or role trees where checking a parent should cascade to (or from) its children
• Org charts, category pickers, or nested-filter UIs backed by large hierarchical datasets
• Custom TreeSelect-style dropdowns that need the same expand/check/drag behavior as Ant Design without loading antd itself

Under The Hood

Architecture The core <Tree> component in src/Tree.tsx is a class-based React.Component that owns the tree’s internal state (key entities, flattened node list, drag state) and delegates rendering to NodeList.tsx, which wraps @rc-component/virtual-list for row virtualization, and TreeNode.tsx for per-node markup. Checkbox cascade logic is isolated in utils/conductUtil.ts, which walks a level-grouped entity map top-down then bottom-up to keep checked/half-checked state consistent under checkStrictly and disabled nodes. Tree flattening and change-detection live in utils/treeUtil.ts and utils/diffUtil.ts so re-renders only touch nodes that actually changed, and contextTypes.ts provides a shared TreeContext so nodes read tree-level config without prop drilling. Because virtualization, checkbox state, and drag-position math all key off the same KeyEntities/FlattenNode structures, changing that core flatten abstraction would ripple through every consuming feature.

Tech Stack Written in TypeScript (87% of the codebase) with Less for the small bundled stylesheet, built via father (the rc-component build tool) into es/lib outputs plus a separately compiled assets/index.css. Runtime dependencies are sibling rc-component packages — @rc-component/util, @rc-component/motion, @rc-component/virtual-list — plus clsx, with react/react-dom as loose peer dependencies. The documentation site runs on dumi, linting on ESLint 10’s flat config with typescript-eslint, and releases are cut through @rc-component/np.

Code Quality The tests/ directory holds 14+ spec files covering accessibility, drag-and-drop, motion, controlled/uncontrolled expand and check state, field-name remapping, and React 18 concurrent rendering, using @testing-library/react and rc-test (the org’s Jest wrapper). CI runs through a shared reusable workflow with Codecov reporting and an automated “react-doctor” review bot on every pull request. One notable gap: tsconfig.json sets "strict": false, so type coverage is looser than the TypeScript-heavy codebase might suggest.

What Makes It Unique The underlying pattern — controlled tree state with virtualization — is a well-established approach used across many UI kits, so this isn’t a novel data structure. Its value is architectural discipline: the correctness-sensitive logic (checkbox cascade, flatten/diff, drag-position rules) lives in small, independently tested utility modules that are shared across Ant Design’s Tree, TreeSelect, and related components, so a fix lands consistently everywhere rather than being re-implemented per consumer.