Preserving state when table data changes

[flostr0]

When table data changes, the state is set to the initial state. Is there a way to prevent this behavior?

Background: I have a table that can be edited by multiple users and each user wants to have the latest data. The data passed to the table is controlled by a component that adds rows through websockets. Now when one user is using the table and another user adds a row the table state is set to the initial state.

I managed to preserve the state using the stateReducer hook. This works because when table data changes two actions are issued, 'resetSortBy' and 'resetPage' (using useSortBy and usePagination).

This way seems very susceptible and I am not sure about side effects, so is there a better/intended way to archive the same behavior ?

const preserveStateInfo = useRef({datalen: props.data.length, actionCountSinceChange: 0});
const tbl = useTable(
    {
        columns: props.columns,
        data: props.data,
        initialState: {pageIndex: 0},
        stateReducer: (newState: any, action: any, prevState: any, ins: any) => {

            if (ins.data.length !== preserveStateInfo.current.datalen) {
                preserveStateInfo.current.actionCountSinceChange++;

                if (preserveStateInfo.current.actionCountSinceChange === 2) {
                    preserveStateInfo.current.actionCountSinceChange = 0;
                    preserveStateInfo.current.datalen = ins.data.length;
                }
                return prevState;
            }
            return newState;
        }
    },
    useSortBy,
    usePagination
)