Does anyone have a simple example of syncronizing an UncontrolledTreeEnvironment with React state?

[doulighan]

I'm a little confused trying to synchronize an uncontrolled tree with React state, using a Custom Data Provider. The docs don't really give advice on this aspect, just setting a data property on the DataProvider isn't quite a solution.

If my requirements are that:

1. All item, focus, and viewState changes must be persisted to server/localstorage, and loaded again on initialization.
2. Changes must be replicated somewhere in React/Redux state, because other components outside the tree depend on the state inside the tree.

[lukasbach]

In regards to the viewstate, you can provide the initial viewstate as prop to define what is focused, selected and expanded during the initial render. Changes to the viewstate you can get in the uncontrolled environment through the individual change handlers, like onExpandItem, onCollapseItem, onSelectItem, onFocusItem.

Synchronizing the data itself (which items are being renamed to what, which items are being dragged where) can be done with the data provider, either implementing the TreeDataProvider interface yourself or using the static tree data provider with the onDidChangeTreeData hook.

If you want even more control over all tree data and manage the live properties for the viewstate yourself, you can use the Controlled Tree environment , there you can control everything yourself, but also need to implement the view state handling and drop logic yourself.

[doulighan]

Thank you! Sorry to make this implementation specific, but lets say in a simple case I just want to save items inside a useState.

function MyApp({ initialItems }) {
  const [items, setItems] useState(initialItems)

  const dataProvider = useMemo(() => {
    return CustomDataProvider(items, setItems) 
  }, [items])
}

// ... 

class CustomDataProvider {
  constructor(items, setItems) {
    this.treeChangeListeners = [];
    this.items = items;
    this.setItems = setItems;
  }

  async getTreeItem(itemId) {
    return this.items[itemId];
  }
  
  async onChangeItemChildren(itemId, newChildren) {
    setItems((prevItems) => ({ ...prevItems, [itemId]: newChildren }))
    this.treeChangeListeners.forEach(listener => listener([itemId]));
  }
  
  // ....more stuff
  
}

1. This approach is going to require CustomDataProvider to be reinstantiated on every update, since items is immutable. Isn't this going to cause the Tree to re-initialize every update as well? Is that an issue?

2. Notifying the listeners isn't going to work here because we need to wait a render cycle before we can tell the tree to update. Maybe point 1 makes this redundant, since the DataSource reference is changing anyways, not sure.

   I suppose I can useEffect(() => dataSource.treeChangeListeners.forEach(listener => listener([Object.keys(items)])) [dataSource, items]) or something to get around the notification issue, but it feels strange.

Maybe the approach is to copy useState into a stable ref each render?
Or, is the idea to simultaneously update this.data, and this.setItems(), and be very careful that they remain in-sync?

And yes looking at UncontrolledTreeEnvironment.ts I can certainly use that as a base to go the Controlled route, but I'll try the simpler path first. I still feel like I'm missing something.

[lukasbach]

Ideally, the data provider is a stable reference that does not change on rerenders. Changes from outside would then be propagated to the dataprovider through the change listeners registered in the data provider.

function MyApp({ initialItems }) {
  const [items, setItems] useState(initialItems)

  const dataProvider = useRef(CustomDataProvider(items, setItems));

  const updateItem = (itemId: string) => {
    // do something with the item and update via setItem()
    dataProvider.treeChangeListeners.forEach(listener => listener([itemId]));
  }

  // render tree
}

You probably would want to encapsulate the treeChangeListeners.forEach part inside of your data provider implementation.

The static data provider would actually also be fine for that, it exposes an event emitter than manages the event propagation of changes on the tree structure from the outside: https://rct.lukasbach.com/docs/guides/static-data-provider#apply-changes-from-outside.

Alternatively, if you just want rerender the tree when the items state was changed, you could create an effect hook that triggers when items change, and trigger the tree change from the hook. You would have to determine the diff to inform RCT about which tree items have actually changed, or alternatively just fetch all tree item ids and schedule a change event for all of them if the performance of your use case allows for that.