Asynchronous large tree loading

[fedyan]

First of all, I want to thank you for your work. We using raqb in a big project. And with the growth of the project, the field tree has grown and there was a performance issue (slowdowns during field selection and rule addition).

We want to solve this problem by dynamically loading the tree as branches are expanded,
using the capabilities of the antd TreeSelect component for asynchronous loading.
Wrote code based on the antd example: https://codesandbox.io/s/58lr3u :

  config.settings.renderField = props => {
  let customProps = {'loadData': this.onLoadData, 'treeData': props.config.settings.tree, 'treeDataSimpleMode': true};
        return <FieldTreeSelect {...props} customProps={customProps}/>
  }

 genTreeNode = (parentId, isLeaf = false) => {
        const random = Math.random().toString(36).substring(2, 6);
        return {
            id: random
            pId: parentId,
            value: random
            title: isLeaf? 'Tree Node' : 'Expand to load',
            isLeaf,
        };
    };

    onLoadData = ({ id }) =>
        new Promise(resolve => {
            setTimeout(() => {
                config.settings.tree = config.settings.tree.concat([
                    this.genTreeNode(id, false),
                    this.genTreeNode(id, true),
                    this.genTreeNode(id, true)
                ]);

                this.setState({config: config});
                resolve();
            }, 300);
        });

The method fires and the state changes, but there is a problem updating the tree in the FieldTreeSelect component. It looks like it's happening because the component is rendered at the start and the passed props are not passed reactive.
How can I update the tree in the FieldTreeSelect component after an asynchronous load. We will be grateful for any hint.