onColumnFiltersChange sees custom state update function as an empty function

[simplecommerce]

Hi,

I am using manual filtering and I am encountering a weird issue.
In my main component where I am initializing the table I am passing the following code:

        onColumnFiltersChange: updater => {
            console.log("handleColumnFiltersChange",setColumnFilters)
    
            setColumnFilters(previousState => {
                const columnFilters = functionalUpdate(updater,previousState);
    
                refetch({
                    filter: mapFilters(columnFilters),
                })
    
                return columnFilters;
            })
        },

My component structure looks like this:

const [columnFilters,setColumnFilters] = useState([]);

const tableInstance = useReactTable({
   state: {
      columnFilters
   }
}) // is initialized here

I am rendering and passing the tableInstance

<div> 
  <VirtualizedTable tableInstance={tableInstance} />
</div>

In my VirtualizedTable component I have a Toolbar that I render and inside it has a component that filters the table and calls tableInstance.setColumnFilters.

This all works fine.

My issue is the following. I found that the performance wasn't good when my toolbar was inside my VirtualizedTable component, so I decided to take it out and put it instead above my right under the main

.

When I did so, without any changes to my code, the table would no longer filter.
I did some debugging and found out that when I console.log(setColumnFilters) it should this: ƒ () {} instead of the state dispatcher function.

When I put it back inside the component, it works normally.
I do not do anything differently, I pass the tableInstance to the toolbar component as usual.

I can't figure out what is different.

I tried to create a ref to my function and use that to be called when the onColumnFiltersChange is triggered and that did the same results.

Hope you can shed some light on what I could look at.

Thanks! Sorry if I am unclear.

Oh and I am using latest version release.

Update:

I did the following test

            <button onClick={() => {
                tableInstance.setColumnFilters([{ id: "division", value: "001" }])
                console.log("onClick",setColumnFilters)
            }}>click me</button>

For some reason the output is:

// this is logged by my funciton
handleColumnFiltersChange ƒ () {} 

// this is the console.log for the onClick
Table.jsx:206 onClick ƒ dispatchAction(fiber, queue, action) {

In this scenario, I commented both rendering of my toolbar and table and simply rendered a button in the same page as my instance of the table.

[simplecommerce]

Ok I figured out what the issue was, it seems it was caused by refetch inside my setColumnFilters. I have no idea why this would break the whole thing. My refetch function comes from @apollo/client.

I commented it and the console.log was working as usual.
I have no idea why in my sub-component, it did not have this impact but outside it did.

I had to remove it and refactor the way I am refetching my query based on the changes.
But this is an odd behavior.

[simplecommerce]

Ok it still doesn't work properly or seems to be intermittent and I have no idea why it would do this, so for now I'll still try to test it on my end and see if I can truly isolate the problem.