As people have started using <InfiniteTable /> we’ve noticed a few issues keep popping up.

While we’re trying to refine our API to be easier to use and understand, developers using the component still need to be aware of some design decisions and conventions used in the component.

Issue: Performance degradation because props are new on every render

Passing new props on every render to the <InfiniteTable /> component or to the <DataSource /> component can be a performance bottleneck.

<DataSource
  // dont do this
  groupBy={[
    {field: 'country'}
  ]}
/>

instead pass the same reference when things do change - stored in state or any other place

const [groupBy, setGroupBy] = useState([
  {field: 'country'}
]);

<DataSource
  groupBy={groupBy}
  onGroupByChange={setGroupBy}
/>

Note

When in dev mode, you can set localStorage.debug = "*" in your localstorage to see potential issues logged to the console. For example, you might see:

InfiniteTable:rerender Triggered by new values for the following props +1s columns