Datagrid is freezing the screen when receiving a "large" list

[lukascivil]

Datagrid is freezing the screen when receiving a "large" list. In v3 I had no problems, but when upgrading to v4 I have performance problems with it.

What you were expecting: Component rendered with no lag issues for lists with more than 1500 items.

What happened instead: The DataGrid (or internal datagrid list processing) hang the screen rendering for a long time. Here on my machine it takes around 8 seconds for 1500 itens, and if I put a list of 15000, the browser crashes.

Steps to reproduce:

Related code:

// First example, took long time to render

const largeList = [...Array(1500)].map((_, index) => ({ id: index, title: index }))

const LargeDatagrid = () => {
  const listContextInfinite = useList({
    data: largeList,
    isLoading: false,
    perPage: 5
  })

  return (
    <ListContextProvider value={listContextInfinite}>
      <Datagrid>
        <TextField source="id" label="Id" />
        <TextField source="title" label="Título" sortable={false} />
      </Datagrid>
      <Pagination />
    </ListContextProvider>
  )
}

// Second example, took long time to render too

const largeList = [...Array(1500)].map((_, index) => ({ id: index, title: index }))

const LargeDatagrid = () => {
  return (
    <Datagrid
      sort={{ field: 'id', order: 'ASC' }}
      data={largeList}
      total={largeList?.length}
      isLoading={false}
      bulkActionButtons={false}
      selectedIds={[]}
    >
      <TextField source="id" label="Id" />
      <TextField source="title" label="Título" sortable={false} />
    </Datagrid>
  )
}

Other information:

Environment

• React-admin version: "react-admin": "^4.2.7"
• Last version that did not exhibit the issue (if applicable): "react-admin": "^3.19.10"
• React version: "react": "^17.0.2"
• Browser: Versão 104.0.5112.81 (Versão oficial) 64 bits
• Stack trace (in case of a JS error):

[antoinefricker]

useList hook handles all the data processing (filtering, sorting, paginating) client-side. That can be pretty expansive on very large list. Could you consider using the dataprovider to handle this dataset? - it would work like a charm...

Optimizations on useList would hardly reduce performance issues but we could document the fact that such a use of this hook is not recommended.

[lukascivil]

I think I understand, but the use of the stand alone dataGrid will be inevitable for some projects, at some point we will have an API that will return all occurrences and we will have to display it in the datagrid. Remembering that he plays his role very well, we just have a performance problem.

The datagrid is slow without useList, is the problem in useList?

Creating a logic on the outside, according to the result of the api and the datagrid to handle performance will be pretty bad.

In my case I'm making a call from outside RA Tools with RTK Query (redux-toolkit) and passing the data to the datagrid.

I'll take the time to investigate this issue, I guess it's worth it, datagrid is one of the most powerful components. But if anyone else can help.

[fzaninotto]

The datagrid is slow without useList, is the problem in useList?

Could you please post a link to a CodeSandbox demonstrating the problem?

Component rendered with no lag issues for lists with more than 1500 items.

React and MUI aren't designed for that kind of usage. React-admin can't do miracles either, as it's based on them.

For very large tables, you should use a virtualized list (e.g. TanStack Table).

[fzaninotto]

No news for some time, closing.