Checkbox clicks cause FixedSizeList to re-fetch data

Question

I'm using react-window's FixedSizeList component. My list has two columns in the UI - the first one's a checkbox and the other one's plain text. The plain text comes from the backend.

The reason why I'm using virtual scroll is that my list can grow up to 10,000 items, and I don't want to fetch data for 10,000 rows at once.

The way I have designed my component is that I save all selected row IDs in a state variable selectedRowIDs. My list gets its data from a rows state variable (row.value for each row is where the plain text lives and row.id is what I add to my selectedRowIDs set)

The problem - whenever I click on a checkbox, my component re-fetches data for the rows currently in the viewport. This is unnecessary because clicking a checkbox shouldn't ideally require a re-fetch. This is a side-effect of my component re-rendering because of the selectedRowIDs update. I'm probably missing something basic here, but I'd appreciate some help with avoiding that re-fetch as it looks bad when the plain text column refreshes on every checkbox click.

<FixedSizeList
    height={500}
    itemCount={rows.length}
    itemData={{ selectedRowIDs }}
    itemSize={50}
    width="100%"
    outerElementType={ScrollableTable}
    innerElementType={ScrollableBody}
>
    {renderFixedSizeList}
</FixedSizeList>

const renderFixedSizeList = ({ index, style, data } => (
    <div key={rows[index].id} style={style}>
        <Checkbox
            checked={selectedRowIds.has(rows[index].id)}
            onChange={(event) => handleSelect(rows[index], event.target.checked)}
        >
        <ComponentThatFetchesFromBackend
            prop1={somethingStatic}
        >
    </div>
);

Checkbox clicks cause FixedSizeList to re-fetch data

0 Answers0