radix-ui
Popper component causing react error due to repeated setState calls
Bug report
When rapidly updating react component state, such as when a user is updating text in an input, anything that uses the popper anchor will throw a react error (and crash if you don't have error boundaries). This can be simulated on a Mac easily by adjusting the key repeat rate and delay until repeat to be fast and short respectively.
Current Behavior
React throws an error and crash the app whenever rapid re-renders happen
Expected behavior
State would not be updated during a render, therefore no crash or error would occur.
Reproducible example
Suggested solution
This line is the culprit I believe: https://github.com/radix-ui/primitives/blob/main/packages/react/popper/src/popper.tsx#L84
That line will call a setState function every re-render, which is against react practices.
Additional context
Here's an example of the crash, just by holding down the paste shortcut: https://github.com/user-attachments/assets/b90cd54e-e4a3-4987-ad09-0967865836a8
Your environment
| Software | Name(s) | Version |
|---|---|---|
| Radix Package(s) | @radix-ui/react-dropdown-menu | 2.1.6 |
| React | n/a | 19.1.0 |
| Browser | Google Chrome | 135.0.7049.117 |
I'm currently experiencing a similar scenario, any plans to tackle this? Note that #3500 was closed and the fix replacing it has not been released yet 🤔
Looks like this pr, https://github.com/radix-ui/primitives/pull/3614, was meant to fix the issue but I'm still getting the Maximum update depth exceeded error via the popper within the context-menu
@zaschrim the changes werent live, they just merged into stable here https://github.com/radix-ui/primitives/pull/3656
Please update to the latest stable and let me know if you are still experiencing issues here.
