{"id":21865,"library":"react-vtree","title":"react-vtree","description":"A lightweight React component for efficiently rendering large tree structures (millions of nodes) built on top of react-window. Current stable version is v3.0.0 (released 2023), which requires React 18+. Release cadence is irregular; v3.0.0 consolidated changes from a long beta, with v4.0.0 planned. Key differentiators: uses a generator-based treeWalker for flexible tree building, supports both fixed-size and variable-size items, and ships TypeScript definitions. Alternatives like react-virtualized-tree are heavier or less maintained.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/Lodin/react-vtree","tags":["javascript","infinite","react","react-component","react-virtualized","reactjs","tree","virtual","virtualized","typescript"],"install":[{"cmd":"npm install react-vtree","lang":"bash","label":"npm"},{"cmd":"yarn add react-vtree","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-vtree","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: required for JSX and hooks","package":"react","optional":false},{"reason":"peer dependency: required for rendering","package":"react-dom","optional":false},{"reason":"peer dependency: core virtualization engine","package":"react-window","optional":false}],"imports":[{"note":"Common named import for fixed-size tree.","symbol":"FixedSizeTree","correct":"import { FixedSizeTree } from 'react-vtree'"},{"note":"Common named import for variable-size tree.","symbol":"VariableSizeTree","correct":"import { VariableSizeTree } from 'react-vtree'"},{"note":"Default export is the FixedSizeTree component; named Tree does not exist.","wrong":"import { Tree } from 'react-vtree'","symbol":"default (Tree)","correct":"import Tree from 'react-vtree'"}],"quickstart":{"code":"import { FixedSizeTree as Tree } from 'react-vtree'\n\nconst treeNodes = [{ id: 'root', name: 'Root', children: [{ id: 'c1', name: 'Child', children: [] }] }]\n\nfunction* treeWalker() {\n  for (const node of treeNodes) {\n    yield { data: { id: node.id, isLeaf: node.children.length === 0, isOpenByDefault: true, name: node.name, nestingLevel: 0 }, nestingLevel: 0, node }\n  }\n  while (true) {\n    const parent = yield\n    for (const child of parent.node.children) {\n      yield { data: { id: child.id, isLeaf: child.children.length === 0, isOpenByDefault: true, name: child.name, nestingLevel: parent.nestingLevel + 1 }, nestingLevel: parent.nestingLevel + 1, node: child }\n    }\n  }\n}\n\nconst Node = ({ data: { name, isLeaf }, isOpen, style, setOpen }) => (\n  <div style={style}>\n    {!isLeaf && <button onClick={() => setOpen(!isOpen)}>{isOpen ? '-' : '+'}</button>}\n    <span>{name}</span>\n  </div>\n)\n\ncreateRoot(document.querySelector('#root')).render(<Tree treeWalker={treeWalker} itemSize={30} height={150} width={300}>{Node}</Tree>)","lang":"typescript","description":"A complete minimal example: defining a tree structure, implementing the treeWalker generator, creating a Node component, and rendering a FixedSizeTree."},"warnings":[{"fix":"Rewrite treeWalker as a generator function. See documentation for the new pattern.","message":"v3.0.0 changed the shape of treeWalker function. Previous treeWalker used synchronous iteration; new treeWalker uses generator with yield for both initial nodes and children.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Use recomputeTree with opennessState object instead of direct state mutations.","message":"v2.0.0 introduced recomputeTree with opennessState parameter; earlier manual node toggle methods are deprecated.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Ensure `isOpenByDefault` is present in the yielded data.","message":"The treeWalker function must yield objects with an `isOpenByDefault` field (boolean). If omitted, the node will be treated as closed initially.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use `style as React.CSSProperties` if needed.","message":"When using TypeScript, the Node component's style prop is of type React.CSSProperties, but the library may pass a plain object. Ensure type compatibility.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Replace `toggle` with `setOpen` and call `setOpen(!isOpen)` to toggle.","message":"v2.0.0 removed the `toggle` prop from Node. You must use `setOpen` function passed via render props.","severity":"breaking","affected_versions":"<2.0.0"},{"fix":"Upgrade to React 18+ or use react-vtree v2.x (requires React 16.8+).","message":"The library does not support React 17; peer dependencies require React >=18. Installing on React 17 causes runtime errors.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure treeWalker is defined as a generator function: function* treeWalker() { ... }","cause":"treeWalker is not a generator function or does not return an iterator.","error":"TypeError: treeWalker is not a function or its return value is not iterable"},{"fix":"Add `isOpenByDefault: true` (or false) to all yielded data objects.","cause":"Missing or invalid `isOpenByDefault` field in yielded data.","error":"Error: The treeWalker function must yield objects with an `isOpenByDefault` field of type boolean."},{"fix":"Pass a valid treeWalker function as the `treeWalker` prop to the Tree component.","cause":"Missing treeWalker prop on Tree component.","error":"Uncaught Error: No treeWalker provided to Tree component"},{"fix":"Destructure setOpen and do not pass it to the DOM element (e.g., inline style only passes style and other needed props).","cause":"Spreading props from Node component to a DOM element when setOpen should not be passed.","error":"Warning: React does not recognize the `setOpen` prop on a DOM element."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}