import { DemoBox } from "../../src/components/demo/demo-box";
import { FeaturePageHeader } from "../../src/components/docs-page/feature-page-header";

<FeaturePageHeader
    title="Sync Data Loader"
    subtitle="Data interface for synchronous data sources"
    feature="sync-data-loader"
/>



When using Headless Tree, you need to provide an interface to read your data. The most straight-forward way
to do this is using the Sync Data Loader Feature. Alternatively, you can use the [Async Data Loader Feature](https://headless-tree.lukasbach.com/llm/features/async-dataloader.md)
if you are dealing with asynchronous data sources. In both cases, you need to include the respective feature
explicitly.

When using the Sync Data Loader Feature, you need to provide a `dataLoader` property in your tree config
which implements the `TreeDataLoader` interface.

```ts
const tree = useTree<ItemPayload>({
    rootItemId: "root-item",
    getItemName: (item) => item.getItemData().itemName,
    isItemFolder: (item) => item.isFolder,
    dataLoader: {
        getItem: (itemId) => myDataStructure[itemId],
        getChildren: (itemId) => myDataStructure[itemId].childrenIds,
    },
    features: [ syncDataLoaderFeature ],
});
```

Note that Headless Tree may call `getItem` and `getChildren` multiple times for the same item, and also during each
render. Therefore, you should make sure that these functions are fast and do not perform any expensive operations.

Asynchronous data providers on the other hand provide caching out of the box, and only call those functions once
per item until their data are explicitly invalidated. If your data source provides an synchronous, yet expensive
interface, you can still use the [Async Data Loader](https://headless-tree.lukasbach.com/llm/features/async-dataloader.md) instead.

:::warning

You should implement the `dataLoader.getItem` and `dataLoader.getChildren` functions so that they return
synchronously. If you need to fetch data asynchronously, you should use the [Async Data Loader](https://headless-tree.lukasbach.com/llm/features/async-dataloader.md)
instead.

:::