[AnalyticalTable] How to get updated length of table's filtered rows?

[ThiagoSzz]

Hello,

In my application, I need to get the length of the table's filteredRows. However, after trying some different approaches, I didn't find a proper way of doing this.

Some things I've tried:

const length = tableInstance.current?.filteredRows.length || 0;

• result: the value didn't update properly

const length = useMemo(() => {
  return tableInstance.current?.filteredRows.length || 0;
}, [tableInstance.current?.filteredRows]);

• result: sometimes worked, sometimes broke the app with React error (React Router caught the following error during render Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.)

const [length, setLength] = useState<number>(0);

useEffect(() => {
  setLength(tableInstance.current?.filteredRows.length || 0);
}, [tableInstance.current?.filteredRows]);

• result: worked but causes the useEffect to be triggered every render due to the use of the useState react hook

[ThiagoSzz]

After some investigation, I found that the issue was in the useControlledState that I was passing to the reactTableOptions prop, that was being triggered due to the dependency that I set in the useEffect:

const useControlledState = (state: any) => {
  useEffect(() => {
    if (state.filters.length > 0) {
      doSomethingWithFilters(state.filters);
    }
  }, [state.filters]);

  return useMemo(() => state, [state]);
};

This caused the doSomethingWithFilters() function to be called everytime the value of a filter was updated, triggering the mentioned React error. To solve this, I've simply added a debounce before calling the function:

const debounceFilters = useRef(
  debounce((filters: any) => {
    doSomethingWithFilters(filters);
  }, 100)
).current;

const useControlledState = (state: any) => {
  useEffect(() => {
    if (state.filters.length > 0) {
      debounceFilters(state.filters);
    }

    return () => debounceFilters.cancel();
  }, [state.filters]);

  return useMemo(() => state, [state]);
};