Example of how to Memoize a filter function?

[ErikAGriffin]

The documentation for useFilter states the following if passing a function to the filter property of a column:

If a function is passed, it must be memoized

While my filtering seems to be working without memoizing the function, I understand it increases performance as the table grows and would like to do so. However, when attempting to wrap my function in React.useMemo I am getting errors.

Here is roughly my filter function for the column:

  const filterStatus = (rows, id, filterValue) => {
    return rows.filter(row => {
      const rowValue = row.values[id];
      return filterValue[rowValue];
    });
  };

filterValue is an object in the form of {value: true, value2: true}

Here is how I have wrapped my filter function in React.useMemo

  const filterStatus = React.useMemo((rows, id, filterValue) => {
    return rows.filter(row => {
      const rowValue = row.values[id];
      return filterValue[rowValue];
    });
  }, []);

However when I do this, I get errors int he console that 'rows' is undefined. In fact, all of the arguments are undefined when the page loads. Any guidance on how to correctly memoize these functions?

[tannerlinsley]

Try this: const filterStatus = React.useCallback((rows, id, filterValue => {...}. [])

[dbertella]

Just declare the function at module level, not inside the component, this is a pure function no need to use a hook for it, whatever do not depend on a prop or state just declare it outside the component

[lkostrowski]

Actually there are 2 levels of memoization you can do here

1. Declare outside component/in useCallback, which will memoize function reference to avoid unnecessary renders
2. To the memoization of function result (eg _.memoize) which will create a cache like Record<filterValue, Rows>, but this will probably conflict with other filters