https://sonarly.com/issue/39408?type=bug
Editing a dashboard can crash the page with “Maximum update depth exceeded”, blocking further layout editing in-session.
Fix: Implemented a guard in `usePageLayoutHandleLayoutChange` to prevent redundant state writes when `react-grid-layout` emits an `onLayoutChange` payload that is effectively identical to the current tab layout.
What changed:
- Added `areLayoutsEqual(firstLayouts, secondLayouts)` (JSON structural comparison).
- In `handleLayoutChange`, before writing `pageLayoutCurrentLayoutsState`, compare `currentTabLayouts[activeTabId]` against `allLayouts`.
- Only call `store.set(pageLayoutCurrentLayoutsState, ...)` when the layout actually changed.
Why this fixes the loop:
- The feedback loop came from unconditional `store.set` on every `onLayoutChange`, which can feed new props back into grid layout and retrigger `onLayoutChange`.
- Skipping no-op writes breaks that self-sustaining render/update cycle for identical layout callbacks.
Test added:
- `usePageLayoutHandleLayoutChange.test.tsx`: new case `"should not rewrite tab layouts when new layout is identical"` asserts that a second identical `handleLayoutChange` call keeps the same stored layout reference for the tab (no rewrite).
Validation attempted:
- Ran:
- `npx jest packages/twenty-front/src/modules/page-layout/hooks/__tests__/usePageLayoutHandleLayoutChange.test.tsx --config=packages/twenty-front/jest.config.mjs`
- It failed due missing `ts-jest` in this environment, so I could not execute tests locally.
Authored by Sonarly by autonomous analysis (run 44884).
sonarly-bot
96a06547d4