2

I'm using react-redux-firebase with reselect and react-virtualized to try and display a 500~ item list that will have entries that will change, get added or get deleted in the background.

Every time a single entry changes on firebase, my table function component retrieves all 500 records from redux and then re-renders the entire table again, rather than the particular row that was changed.

Had hoped that using reselect along with react-virtualized would solve this, alas I am now wondering if it is caused by the fact I am using ternarys in some of my columns, or is there another issue?

If there is no solution I can do with regard to table/row tweaks, is it possible to debounce/throttle the updates coming in from useFireStoreConnect or useSelector, so I would only be updating the table at most every 2/3 seconds? 

const itemsSelector: any = createSelector(
    (state: any) => state.firestore.ordered.items,
    items => items
);

const ItemsTable: React.FC = React.memo(() => {

    useFirestoreConnect('items');

    const items: any = useSelector((state: any) => itemsSelector(state));

    console.log(items) // 500~ firestore items, called every time there's a change to one entry

    ...

    // The entire table is being re-rendered every time a single firebase entry that's been synced to redux is changed
    return (
        <AutoSizer>
            {({ height, width }) => (
                <Table
                    width={width}
                    height={height}
                    headerHeight={48}
                    rowHeight={48}
                    rowCount={items.length}
                    rowGetter={({ index }) => items[index]}
                >

                    <Column
                        label="Status"
                        dataKey="status.name"
                        cellRenderer={({ rowData }) =>
                            rowData.status ? rowData.status.name : '-'
                        }
                        width={100}
                    />
     ...

0 Answers0