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