react
react copied to clipboard
Bug: memory leak in useReducer
React version: 17.0.2
When using React.useReducer()
and a new action is pushed, but the reducer returns the current state, the operation is queued in a pending queue. But if the component isn't re-rendered for other reasons, it will never start work on that pending queue. This can potentially rack up a huge list of pending.next.next.next.next...
Steps To Reproduce
- https://codesandbox.io/s/unruffled-moore-wp5wq?file=/src/App.js
- click increment a few times
- place a breakpoint in react-dom.development.js line 16072, click increment, that should hit the break point, then expand queue.pending.next.next.next and see they are unique actions. (https://github.com/facebook/react/blob/269dd6ec5da85fc5ca819cfa010ce60dd1c83ec6/packages/react-reconciler/src/ReactFiberHooks.new.js#L1937)
Link to code example: https://codesandbox.io/s/unruffled-moore-wp5wq?file=/src/App.js
The current behavior
There is no change in behavior, but it is potentially racking up an enormous list of pending tasks, costing memory.
The expected behavior
Flat memory usage. Reducer doesn't run twice on the same action.
This is very much related to https://github.com/facebook/react/pull/15198 because later the reducer might run, and basically reduce the same actions again. Which is unexpected. And if using side-effects, doesn't produce the expected results.
Other related bugs: https://github.com/facebook/react/issues/17953 https://github.com/facebook/react/issues/15088
For a second example that doesn't have any side effects, thus doesn't trigger https://github.com/facebook/react/pull/15198, but still has the memory leak, see here: https://codesandbox.io/s/bold-sun-k5nig?file=/src/App.js
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Bump
bump
It's surprising that this issue isn't even acknowledged..
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
buuuuuuump
Bump
The CodeSandbox repro no longer results in a memory leak using 18.3.1 for what it’s worth, so this particular issue can probably be marked as fixed unless a more up-to-date repro is provided. I did notice that using 17.0.2 React would accumulate all the actions that were dispatched while the reducer returned the same state, and subsequently replay them, but that’s no longer the case using the latest React (fixed in https://github.com/facebook/react/pull/22445)
The CodeSandbox repro no longer results in a memory leak using 18.3.1 for what it’s worth, so this particular issue can probably be marked as fixed unless a more up-to-date repro is provided. I did notice that using 17.0.2 React would accumulate all the actions that were dispatched while the reducer returned the same state, and subsequently replay them, but that’s no longer the case using the latest React.
Thank you for the reply!! The project I noticed this is using React 16, so I definitely need to upgrade.
That being said, I believe this still reproduces: https://github.com/facebook/react/issues/28981. However, I believe that issue is fixed by https://github.com/facebook/react/pull/25309 in React 19.
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!