table icon indicating copy to clipboard operation
table copied to clipboard

Fully Controlled: possible sync issues between internal state and users state

Open sjbuysse opened this issue 2 years ago • 0 comments

Describe the bug

Hi,

I noticed in the source code that the table is trying to manage 2 states when fully controlled. The library will try to update both internal state & the users state, this can (and will create discrepancies between those 2 states).

I came across a discrepancy when I wanted to keep my state in a Context.

Your minimal, reproducible example

https://codesandbox.io/s/throbbing-fog-w9f2qg?file=/src/main.tsx

Steps to reproduce

  1. Expand the first row
  2. Click 'refresh data' button
  3. Expanded state should be set to {} , as defined in the useEffect
  4. You'll see that the first row is still expanded though

When I debug the react-table library locally, I can see that the internal state kept in index.tsx is actually correctly updated, the user state isn't.

PS. If you uncomment the useState line, and comment out the useTableContext line, everything works correctly. Nonetheless, I don't think there should be possible discrepancies with a fully controlled pattern.

Expected behavior

The internal & user state are the same. Even better would be if there was just a single source of truth (the users state)

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOs

react-table version

8.5.11

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

  • [X] I agree to follow this project's Code of Conduct
  • [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

sjbuysse avatar Aug 16 '22 13:08 sjbuysse