Top
TreeView - Asynchronous data and nodes
TreeView
The dataSource can be a Promise or a function returning a Promise (in which case, it is called the the <TreeView /> props as the first argument). While the async dataSource is resolving, you can display some loading feedback in the tree, using the renderLoader function prop.
The above example shows a simple lazy-loaded dataSource. But the true power of lazily loaded trees lie in nodes being able to be loaded lazily as they are expanded - continue reading in order to find out more about this.
Async nodes are one of the most powerful features of the <TreeView />. An async node can lazily load it’s children asynchronously.
There are two strategies on making <TreeView /> components have async nodes - depending on the logic of your app, you may find one better than the other. Basically, there are two big use-cases:
  1. some of the <TreeView /> nodes are async.
  2. all of the <TreeView /> nodes are async.
Let's dive into each of them:
  1. The first scenario is that you want some of the <TreeView /> nodes be async. In this case, you need to configure the <TreeView /> with the loadNodeOnce function prop. In this scenario, there are two ways to make a node be async:
    • either configure the <TreeView /> with isNodeAsync function prop and return true, for the node you want to have async behaviour.
    • or a node is async if node.nodes === null or node.nodes === undefined. Once an async node has been expanded, the loadNodeOnce will no longer be called for that node on subsequent expand actions, and the node is no longer considered async, even if node.nodes == null.
  2. The second scenario is that all (or most) of your nodes are async. In this case, <TreeView /> should be configured with the loadNode function prop. In this configuration:
    • all nodes are considered async by default.
    • isNodeAsync ultimately determines if a node is async or not.
Based on the two scenarios above, when an async node is expanded, one of the following function props will be called:
  1. loadNodeOnce - same as loadNode, but caches the result of the function call and does not call it on sunsequent expand actions on the same node.
  2. loadNode - specified for async trees. Called with the node to be expanded. Should return an array of child nodes, or null.
    When loadNode is specified all nodes are considered async & non-leaf by default. In this case, you can use isNodeAsync to determine which nodes should not be async.
Additionally, the following are also called, if specified: