React-table: useControlledState causes infinite loop

[atlanteh]

Describe the bug (required)
useControlledState causes infinite loop, and page is stuck.

Provide an example via Codesandbox! (required)
https://codesandbox.io/s/sweet-booth-ykfw0

Steps To Reproduce (required)
Steps to reproduce the behavior:

1. Open https://codesandbox.io/s/sweet-booth-ykfw0
2. Try filtering
3. Page is stuck due to infinite loop

Expected behavior (Recommended)
Able to create controlled filtering and sorting

Desktop (please complete the following information):

• OS: [e.g. iOS] Window
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22] 7.0.0

[tannerlinsley]

I'm seeing some other unrelated issues in that code sandbox. Can you double check that one please and make sure it's up to date with your expectations?

[atlanteh]

I'm seeing the infinite loop in the console. I think it's related to useControlledState.
I'm not sure how to properly use it to control filtering and sorting. the only example I see is for a very basic pagination example. Is there a more complex example that can show how to make the table completely controlled?

[gosticks]

I had the same issue while implementing a controlled table it seems that the state object changes each render. But you can avoid the infinite loop by using the values of state directly in the dependency e.g. state.filter, state.sortBoy and so on. Here is a working example: https://codesandbox.io/s/polished-cookies-4elu8?fontsize=14&hidenavigation=1&theme=dark

[atlanteh]

I think there's a bug in your code:

  const { sortBy, filter } = state;
  useEffect(() => {
    onFilterChange({ sortBy, filter });
  }, [onFilterChange, sortBy, filter]);

The above code uses filter prop which doesn't really exist. The real prop is filters, and when you change the above code to:

  const { sortBy, filters } = state;
  useEffect(() => {
    onFilterChange({ sortBy, filters });
  }, [onFilterChange, sortBy, filters]);

The useEffect is never triggered because viewParams never let the state change:

      useControlledState: state => {
        const vp = viewParams;
        return React.useMemo(
          () => ({
            ...state,
            ...vp
          }),
          [state, vp]
        );
      }

So still I cannot get how to properly set a controlled table

[atlanteh]

I also see issues when the data actually changes.
Can you please get a fully working example with both sorting and filtering?
I think it will be very beneficial to also add it to the examples section
Thanks a lot!

[atlanteh]

@tannerlinsley can you please provide an example of controlled react-table with sorting / filtering? There's no example of useControlledState. The only example I found is https://react-table.js.org/examples/controlled but it's only for external pagination field and it doesn't use useControlledState.

[tannerlinsley]

TBH I've recently found some fundamental issues with useControlledState in its current form. The next version of React Table is going to contain a few breaking changes that will effectively do this, but much better. Stay tuned.

[atlanteh]

@tannerlinsley Any chance the next version is released in the next 2 weeks?

[tannerlinsley]

Negative.

[atlanteh]

I see a new version has being release 7.2.0, but I don't see anything regarding this.. Is this not ready yet?