Common Issues

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}
/>