table
table copied to clipboard
Fully Controlled: possible sync issues between internal state and users state
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
- Expand the first row
- Click 'refresh data' button
- Expanded state should be set to
{}
, as defined in theuseEffect
- 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.