Functional example of stopping automatic updates?

[qapla47]

I'm wondering if there is a functional example of this FAQ implemented anywhere? or a more comprehensive example of useControlledState being used, though I also know that there's discussion around that functionality (#1758).

What I have:
A table with filtering, sorting, expanding rows, subComponents, data driven styles, and editable cells all enabled using v7.3.2. My data comes in through both websockets (primarily) and rest API calls (for editing), that data goes into redux state, and back out to the component through reselect selectors (memoized selectors). However, whenever I receive this updated data, the sorting / filtering / expanded rows all reset, and if you're in the middle of editing a cell, those changes are also lost.

What have I tried:
The "stop state from auto resetting" example doesn't appear to function at all.
I have also attempted implementing useControlledState (existing examples here, here) to prevent these renders, but run into the issues others have brought up where the data might not trigger the expanded state to collapse, but you also don't get the toggle action to immediately trigger a render (#1716).

Anyone have any other examples hiding out there?

[Vasu-p]

I am also facing a similar issue. I have controlled selection and it resets the selection state of the table whenever I try to select any row and I tried the "avoid auto-reset FAQ" but doesnt seem to work for me

[umarluqman]

You can try take a look at this https://codesandbox.io/s/react-table-with-global-states-pagination-index-ny4kj?file=/src/Listing.js:4367-4454.

I use the React.useRef to track the user's action in stateReducer and use the useControlledState to use external states under certain conditions.