react-table filter with lodash is not working

Question

I am using react-table and for filtering the table, I'm using the code below:

<Grid
      className="search-grid"
      manual
      data={data}
      loading={loading}
      pages={pages}
      sortable={false}
      columns={createColumns(... )}
      page={page}
      pageSize={pageSize}
      sorted={sorted}
      onPageChange={onPageChange}
      onPageSizeChange={onPageSizeChange}
      onSortedChange={onSortedChange}
      filtered={filtered}
      onFilteredChange={handleOnFilteredChange(onFilteredChange)}
    />

const createColumns = (...some params) => [
   ..............
    {
      Header: 'Description',
      accessor: 'leDesc',
      minWidth: 200,
      sortable: true,
      filterable: true,
    },];

In the funcion onFilteredChange I'm calling a rest api. The above code is hitting the endpoint for every key stroke (each input character) on filter. So, I added the lodash.

const handleOnFilteredChange = onFilteredChange => debounce(onFilteredChange, 1000);

The filter still hits the endpoint for every key stroke. Am I doing something wrong?

My requirement is I shouldn't hit the endpoint for key stroke. Any help is appreciated.

Answer 1

Change onFilteredChange assignment in Grid like below:

<Grid 
  ...
  onFilteredChange={handleOnFilteredChange}
/>

Change function handleOnFilteredChange like below:

const handleOnFilteredChange  => debounce(onFilteredChange, 1000);

Answer 2

I know this is probably not relevant for you, but posting it here for anyone else who may be looking for the solution.

I found that it was not possible to debounce the filtering, however instead I debounced the actual fetching of the data.

const fetchData = (state, instance) => {
  setLoading(true);
  quoteApi
    .loadQuotes(state.page, state.pageSize, state.sorted, state.filtered)
    .then(result => {
      setLoading(false);
      setData(result);
    });
};

const fetchDataDebounced = debounce(fetchData, 1500);

<ReactTable
  columns={[
    // Removed for space purposes
  ]}
  defaultPageSize={10}
  showPaginationBottom={true}
  className="-striped -highlight"
  loading={loading}
  data={data}
  pages={pages}
  filterable
  pageSizeOptions={[5, 10, 25, 50, 100]}
  manual
  onFetchData={fetchDataDebounced}
/>

All works for me with react-table@6.11.5 and lodash@4.17.20