fix(useTable): work around React 18 useReducer eager bailout change #4207
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
React 18 removed some logic from `useReducer()` where a dispatch would eagerly call reducers to recompute the state so now reducers will be called after render. This poses a problem for `useTable()` because during render it mutates the `instance` by spreading in `props` and does not expect this to happen before reducer execution. We were passing a `pageCount: undefined` prop to `useTable()` and by the time the reducer executes `instance.pageCount` is been overwritten, causing a bug in our app. In the Codesandbox reproduction you can see that hitting the "next" button will not work. I understand that our abstraction around `useTable()` probably shouldn't be passing this prop when `undefined` but the behavior change was unexpected and I wonder if it breaks any other assumptions that this library makes. The fix I made here is to just replace `useReducer` with `useState`, which still has the eager bailout check. React PR in question: facebook/react#22445 Codesandbox repro: https://codesandbox.io/s/cool-edison-45tkqx?file=/src/App.js:1331-1358
|
Is there any chance this change can be published? The problem can also lead to |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
React 18 removed some logic from
useReducer()where a dispatch would eagerly call reducers to recompute the state so now reducers will be called after render. This poses a problem foruseTable()because during render it mutates theinstanceby spreading inpropsand does not expect this to happen before reducer execution. We were passing apageCount: undefinedprop touseTable()and by the time the reducer executesinstance.pageCountis been overwritten, causing a bug in our app. In the Codesandbox reproduction you can see that hitting the "next" button will not work. I understand that our abstraction arounduseTable()probably shouldn't be passing this prop whenundefinedbut the behavior change was unexpected and I wonder if it breaks any other assumptions that this library makes. The fix I made here is to just replaceuseReducerwithuseState, which still has the eager bailout check.React PR in question: facebook/react#22445
Codesandbox repro: https://codesandbox.io/s/cool-edison-45tkqx?file=/src/App.js:1331-1358