Debugging your DataGrid performance with custom tracks in Chrome DevTools
By radu·
We want to make sure Infinite Table is the top React DataGrid in terms of performance. And we also want to give you the right tools to track down any slowness you might find in your app.
Infinite Table was the first DataGrid with a DevTools extension.
Today we announce Infinite Table is the first DataGrid that gives you custom tracks in Chrome DevTools performance profiles.
We've been inspired by the React 19.2 release blogpost where the React team announced the custom tracks being available in the performance profiler.
So we thought, why not!
To see your Infinite DataGrid instance in the Chrome DevTools profiler, make sure you specify the
debugId prop.Basically, if you have multiple grids in your app, you'll be able to see a dedicated track for each separate instance.
Specify the debugId prop to see the DataGrid in the Chrome Profiler
<DataSource> <InfiniteTable debugId="your-datagrid" /> </DataSource>
COPY
Once your
debugId prop is configured, you can hit the recording the performance profile in Chrome DevTools, and once the profile is done, you'll see something similar to the image below.
For now, we mainly show data-heavy operations, like sorting, grouping/filtering and flattening the data array, but more will be added in the near future.
Start recording a performance profile - while recording, click a column header to trigger a sort
View Mode
Fork ForkThe custom tracks give you high-fidelity information about the time the operation took, but give you additional insights - like the count of your data-array for sorting operations, what types of manipulations actually take place with the data and more.
We're really interested to see what other insights you find useful and want us to include in the custom tracks. Reach out to us on X and let's start the conversation!