(v8) Use onColumnFiltersChange to set URL search params when column filters change creates a tree mismatch and breaks the render cycle

[bennettdams]

Hey!

I would like to update the URL search params whenever a column filter is changing.

When one uses the onColumnFiltersChange function, it mimics how a useState's setter works: You either set the state directly or you receive an updater function which also allows access to the previous state.

Here's what I initially tried to do:

  const table = useReactTable({
    ...
    onColumnFiltersChange: (filtersOrUpdaterFn) => {
      if (typeof filtersOrUpdaterFn !== "function") {
        setColumnFilters(filtersOrUpdaterFn)

        // this works fine, but in my case, this variant of the callback is never used
        setSearchParam(filtersOrUpdaterFn)
      } else {
        setColumnFilters((old) => {
          const newFilters = filtersOrUpdaterFn(old)

          // 💣this does not work
          setSearchParam(newFilters)

          return newFilters
        })
      }
    },
    ...
  })

...but as you maybe know, updating INSIDE the setter's update function is not allowed.
So in my example, setSearchParam creates a tree mismatch and breaks the render cycle and the following error is produced:

Workaround

Right now, I keep the column filters in a useState and only update the search params in a useEffect like so, which is obviously not ideal:

  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
    !paramValue ? initialColumnFilters : JSON.parse(paramValue),
  )
  
  ...
  onColumnFiltersChange: setColumnFilters,
  ...

  useEffect(() => {
    /**
     * Unfortunately we can't set the search params in the `onColumnFiltersChange` function, as it only uses the setters update function.
     * Doing it inside the setter's callback would create a tree mismatch with such an error:
     * "Cannot update a component (`Router`) while rendering a different component (`DataTable`)......"
     */
    if (isColumnsFiltered) {
      setSearchParam(columnFilters)
    } else {
      deleteSearchParam()
    }
  }, [columnFilters, setSearchParam, isColumnsFiltered, deleteSearchParam])

---

What is the canonical way to do "other" stuff in the onColumnFiltersChange callback?
Can one somehow force the onColumnFiltersChange to never use the "updater" style of the setter and only use the variant that provides the state directly?

[muuhoffman]

For what it's worth, your answer helped me solve my same issue, and I'm not dealing with any type errors. However, I'm still having to do the typeof updater === "function" check.

  const [{sortBy, filterBy}, setSearchParams] = useSearchParams(); // my custom search params hook that returns the string or default of the search params

  const sorting = useMemo(() => {
    try {
      return JSON.parse(sortBy);
    } catch (e) {
      return [];
    }
  }, [sortBy]);
  const setSorting: OnChangeFn<SortingState> = useCallback(
    (updater) => {
      const newSorting =
        typeof updater === "function" ? updater(sorting) : updater;
      setSearchParams({
        sortBy: JSON.stringify(newSorting),
      });
    },
    [setSearchParams, sorting]
  );
  const columnFilters = useMemo(() => {
    try {
      return JSON.parse(filterBy);
    } catch (e) {
      return [];
    }
  }, [filterBy]);
  const setColumnFilters: OnChangeFn<ColumnFiltersState> = useCallback(
    (updater) => {
      const newColumnFilters =
        typeof updater === "function" ? updater(columnFilters) : updater;
      setSearchParams({
        filterBy: JSON.stringify(newColumnFilters),
      });
    },
    [setSearchParams, columnFilters]
  );

  const table = useReactTable({
    columns: MY_COLUMNS,
    data: tableData,
    getRowId: (row) => row.id,
    getCoreRowModel: getCoreRowModel(),
    // sorting
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
    // filtering
    getFilteredRowModel: getFilteredRowModel(),
    getFacetedRowModel: getFacetedRowModel(),
    getFacetedUniqueValues: getFacetedUniqueValues(),
    onColumnFiltersChange: setColumnFilters,
    state: {
      sorting,
      columnFilters,
    },
  });