Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useRowSelect not work with React.StrictMode

See original GitHub issue

Describe the bug (required)

When using React.StrictMode in conjunction with useRowSelect, I cannot select more than one row. And in selectedRowIds I only get data from the first selection

Provide an example via Codesandbox! (required) I fork base useRowSelect example and add React.StrictMode. Exsample

Steps To Reproduce (required) 0. State before:

"selectedRowIds": {},

Select first line.

"selectedRowIds": {
    "0": true,
    "0.0": true,
    "0.1": true,
    "0.2": true
  }

Select second line

"selectedRowIds": {
    "0": true,
    "0.0": true,
    "0.1": true,
    "0.2": true
  }

Select third line

"selectedRowIds": {
    "0": true,
    "0.0": true,
    "0.1": true,
    "0.2": true
  }

Expected behavior (Recommended) 0. State before:

"selectedRowIds": {},

Select first line.

"selectedRowIds": {
    "0": true,
    "0.0": true,
    "0.1": true,
    "0.2": true
  }

Select second line

"selectedRowIds": {
    "0": true,
    "1": true,
    "0.0": true,
    "0.1": true,
    "0.2": true,
    "1.0": true,
    "1.1": true,
    "1.2": true
  },

Select third line

{
  "selectedRowIds": {
    "0": true,
    "1": true,
    "2": true,
    "0.0": true,
    "0.1": true,
    "0.2": true,
    "1.0": true,
    "1.1": true,
    "1.2": true,
    "2.0": true,
    "2.1": true,
    "2.2": true
  },

Desktop (please complete the following information):

OS: macOS 10.15.2
Google Chrome
Version 80.0.3987.149

Issue Analytics

State:
Created 3 years ago
Reactions:7
Comments:8 (1 by maintainers)

Top GitHub Comments

1reaction

spectrascommented, Apr 15, 2020

Here is another sandbox that shows the problem:

https://codesandbox.io/s/hopeful-elion-9ueg9?file=/src/index.js

To reproduce:

Simply tick the checkbox in order.
As you tick the 3rd checkbox, the 2nd will untick itself.
Also, the selection count does not get updated.

Without strict mode:

Comment out the two strict mode lines on the left.
Everything works as expected (checkboxes have consistent behavior, and selection count is updated).

Ideas I believe this could come from either of two design issues (or the combination of both).

There are side effects in a useMemo hook — opened #2170 about this.
The state reducer reads state outside of previousState, which may or may not be up to date (resolving this ambiguity is the whole point of the reducer pattern). — opened #2171 about this.

0reactions

tannerlinsleycommented, May 5, 2020

Going to track this in #2170