React-table: Side effects in `useMemo` in `useRowSelect` plugin

[spectras]

I decided to pull this out of #2120 to give it proper focus, and also because if 2120 gets resolved in another way, I believe it is still important to see this fixed.

Describe the bug (required)

The useRowSelect plugins incurs side effects in a useMemo call.

This violates the useMemo pattern, and is the probable root cause for varied desynchronization and re-rendering rendering issues (eg #2159, #2120).

Provide an example via Codesandbox! (required)

See related bugs.
Perhaps this is the simplest form, though its simplicity needs React.Strict to trigger a break.

In more complex code, it manifests itself as isSelected/selectedFlatRows desynchronization.

Steps To Reproduce

• Go to useRowSelect.js:181.
• Notice the lines that have side effects.
  js row.isSelected = !!isSelected row.isSomeSelected = isSelected === null

Expected behavior

I see two possible approaches:

• Better: properly derive isSelected from selectedRowIds (that is, make isSelected a useMemo with dependency on selectedRowIds)
• Alternative: explore useLayoutEffect instead? Sounds kludgy.

[tannerlinsley]

Yes, this is bad. Again, in the next branch we're moving away from the need for these weird workarounds by moving a lot of things to lazily-invokable getters. This way we don't need to be memoizing a bunch of things all the time as long as we keep everything up to date that we can up to that point. More info coming soon.

[alverdal]

I ran into this issue today as well, was quite confused until I found this issue. perhaps it could be mentioned in documentation as a known issue until it's fixed?

[tannerlinsley]

The amount of people running into this as of today are very few, and seeing how the issue will disappear in the next version, I don't see a big pressing issue to fix this. That said, if the number of people experiencing this issue increases dramatically I will look into fixing it in v7. As always anyone coming across the this issue that wants to fix it is more than welcome to open a PR and I would be happy to guide them along the way.

[ahmad-khan-educative]

We ran into this problem as well. We are using some other tables in our codebase and wanted to move to react-table, but this has become a blocker for us to move to it. I was just silently watching this thread. I'd be happy if this gets resolved soon.

[rafaelnogueira1]

I think it's a good ideia to inform this situation in the documentation. I still use react-table but when i need to make changes around select lines i delete the at my index.
This problems only occurs in the dev environment so for now we are good here.

[spectras]

For what it's worth, a simple workaround is to use controlled state for selection. This completely avoids the issue, since it disables selection state logic inside the useRowSelect plugin. Well at that point, the plugin looses much of its usefulness I guess, but that a nice way to get the same result while still using the rest of react-table features.

I am looking forward to v8 though, it looks like major internal changes are planned, which will make this kind of issues a thing of the past.

[rmontroy]

For what it's worth, a simple workaround is to use controlled state for selection. This completely avoids the issue, since it disables selection state logic inside the useRowSelect plugin. Well at that point, the plugin looses much of its usefulness I guess, but that a nice way to get the same result while still using the rest of react-table features.

I was rather confused by this bug, too, and ultimately had to avoid the useRowSelect hook.