Controlled row selection not clearing

[sebpowell]

Hi there,

I'm trying to build a component with React Table with a controlled selected row state.

I found a Code Sandbox that provides an example here: https://codesandbox.io/s/tannerlinsley-react-table-row-selection-controlled-forked-8ql06g?file=/src/App.js

However, I found that if you add for instance a button to clear the selection, the state in the parent component is cleared, but the internal state for the table seems to persist.

The above is a forked version where I added the button in to show the issue. Also see below screenshot (selectedRowKeys is empty, but the selection persists in the component).

I also found another example here that uses refs and appears to work (https://codesandbox.io/s/forward-ref-57bwn?file=/src/components/Table.js:920-923), but not sure that's the right way to go about doing it (I guess I would expect the React Table's internal state to match whatever is being set in the parent).

Any ideas how this can be fixed?

[sebpowell]

My colleague just pointed out that it will work if adding selectedRows in the useMemo dependency array as such:

const data = React.useMemo(() => makeData(10), [selectedRows]);

However, in our local version, we are not at present using useMemo – we are passing in data directly into the useTable instance.