Performance with large datasets

[mihkelv2in]

We are evaluating SVAR React File Manager and the integration suits our use case well.

The main issue we’ve found is performance with large directories. When a folder contains many files and subfolders, the file manager becomes slow and less responsive.

Are there any recommended ways to improve performance when working with large datasets?

Also, are there any plans to add virtualization/windowing support for list or grid views?

[Natasha-eng]

Hello @mihkelv2in ,

The Filemanager is designed to handle large datasets efficiently, but you need to follow the dynamic loading pattern described in the docs. Here are the specific best practices:

1. Enable lazy loading for folders
   Mark folders that contain many items with lazy: true in your initial data array. This tells the component not to load their contents upfront:

const data = [
  { id: "/Code", type: "folder", lazy: true },
  { id: "/Music", type: "folder", lazy: true },
  // ... files at root level only
];

2. Implement onRequestData to load folder contents on demand
   When a user opens a lazy folder, the component fires a request-data action. You can listen to it and fetch only that folder’s content from your backend.

const loadData = (ev) => {
  const folderId = ev.id;
  fetch(`${server}/files?id=${encodeURIComponent(folderId)}`)
    .then(res => res.json())
    .then(data => {
      fmApiRef.current.exec("provide-data", { id: folderId, data });
    });
};

return <Filemanager onRequestData={loadData} ... />

More information about lazy loading you can read in the article.
Here is the demo with backend data.
And here is the code of the demo.

3. Use RestDataProvider for built-in debouncing and backend integration
   The RestDataProvider service automatically handles:

• loadFiles(id): fetches folder content;

• loadInfo(): gets drive usage;

• debouncing of rapid events (rename, delete, etc.);

const restProvider = new RestDataProvider(server);
// ... then in init:
api.setNext(restProvider);

Here is the demo and here is the code of how to use RestDataProvider.

4. If each file requires expensive additional info (like image dimensions or video duration), load it asynchronously via the extraInfo callback.

Also you can read the article about Filtering data on the backend. Here is the code example of backend filtering: https://github.com/svar-widgets/react-filemanager/blob/main/demos/cases/BackendFilter.jsx .

As for:

Also, are there any plans to add virtualization/windowing support for list or grid views?

Your suggestion about adding virtualization will be taken into consideration. If this feature is implemented in one of the future versions, we will notify you.