chore: avoid render-phase state update in Resizable#2410
chore: avoid render-phase state update in Resizable#2410jonaslagoni merged 3 commits intoasyncapi:masterfrom
Conversation
✅ Deploy Preview for modelina ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR addresses a React render-phase state update warning by moving a dispatch call from inside useTransform (which runs during render) to an onDrag event handler. The goal is to eliminate React StrictMode warnings and follow React best practices by keeping renders side-effect free.
Changes:
- Simplified
useTransformto only calculate width, removing the state dispatch - Added
onDraghandler to the draggable separator to dispatch state updates during drag events - Updated
useEffectdependency array to includestate.editorSizeanddragableX - Minor indentation fixes
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
|
Please retry analysis of this Pull-Request directly on SonarQube Cloud |
Pull Request Test Coverage Report for Build 21110926242Details
💛 - Coveralls |
|
@all-contributors please add @Varadraj75 for code |
|
I've put up a pull request to add @Varadraj75! 🎉 |



Description
This PR fixes a React render-phase state update in the Modelina Playground.
Previously, layout state was updated inside
useTransform, which runs during render and caused React warnings. The state update has been moved to the drag handler, ensuring rendering remains side-effect free and StrictMode-safe.Related Issue
Fixes #2409
Checklist
npm run lint).npm run test).Additional Notes
This change does not alter runtime behavior. It only removes a render-phase side effect that triggered React warnings during development and StrictMode.