[8.x] [kbn-grid-layout] [Dashboard] Fix memoization of onLayoutChange callback (#217235) (#217259)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[kbn-grid-layout] [Dashboard] Fix memoization of `onLayoutChange`
callback (#217235)](https://github.com/elastic/kibana/pull/217235)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Hannah
Mudge","email":"Heenawter@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-04-04T20:53:17Z","message":"[kbn-grid-layout]
[Dashboard] Fix memoization of `onLayoutChange` callback
(#217235)\n\nCloses
https://github.com/elastic/kibana/issues/217117\n\n## Summary\n\nIn the
dashboard grid component, we memoize the `onLayoutChange`\ncallback with
`viewMode` as a
dependency:\n\n\n64142047fb/src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/dashboard_grid.tsx (L80-L105)\n\nHowever,
on the `kbn-grid-layout` side, the subscription responsible for\ncalling
`onLayoutChange` was set up in a `useEffect` that did **not**\nhave the
`onLayoutChange` prop as a dependency - so even though the prop\nwas
changing, the subscription continued to use the original value.\n\nThat
means that if the dashboard starts in view mode, then
the\n`kbn-grid-layout` layout change subscription will always be calling
the\nversion of `onLayoutChange` where it returns early; and likewise
when\nyou start the dashboard in edit mode. By adding `onLayoutChange`
as a\ndependency to the `useEffect` that sets up the subscriptions, this
no\nlonger happens.\n\n###
Before\n\n\n\nhttps://github.com/user-attachments/assets/5df796f5-929d-4522-b438-64cc49292ed6\n\n###
After\n\n\n\nhttps://github.com/user-attachments/assets/286dd459-b429-40fb-8cb7-661b3f870214\n\n\n\n###
Checklist\n\n- [x] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"8382475eb5f68b804d6c7f1b59b50b4ff956c59e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["regression","release_note:fix","Team:Presentation","loe:small","impact:high","backport:version","v9.1.0","v8.19.0","v8.18.1","v9.0.1"],"title":"[kbn-grid-layout]
[Dashboard] Fix memoization of `onLayoutChange`
callback","number":217235,"url":"https://github.com/elastic/kibana/pull/217235","mergeCommit":{"message":"[kbn-grid-layout]
[Dashboard] Fix memoization of `onLayoutChange` callback
(#217235)\n\nCloses
https://github.com/elastic/kibana/issues/217117\n\n## Summary\n\nIn the
dashboard grid component, we memoize the `onLayoutChange`\ncallback with
`viewMode` as a
dependency:\n\n\n64142047fb/src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/dashboard_grid.tsx (L80-L105)\n\nHowever,
on the `kbn-grid-layout` side, the subscription responsible for\ncalling
`onLayoutChange` was set up in a `useEffect` that did **not**\nhave the
`onLayoutChange` prop as a dependency - so even though the prop\nwas
changing, the subscription continued to use the original value.\n\nThat
means that if the dashboard starts in view mode, then
the\n`kbn-grid-layout` layout change subscription will always be calling
the\nversion of `onLayoutChange` where it returns early; and likewise
when\nyou start the dashboard in edit mode. By adding `onLayoutChange`
as a\ndependency to the `useEffect` that sets up the subscriptions, this
no\nlonger happens.\n\n###
Before\n\n\n\nhttps://github.com/user-attachments/assets/5df796f5-929d-4522-b438-64cc49292ed6\n\n###
After\n\n\n\nhttps://github.com/user-attachments/assets/286dd459-b429-40fb-8cb7-661b3f870214\n\n\n\n###
Checklist\n\n- [x] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"8382475eb5f68b804d6c7f1b59b50b4ff956c59e"}},"sourceBranch":"main","suggestedTargetBranches":["8.x","8.18","9.0"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/217235","number":217235,"mergeCommit":{"message":"[kbn-grid-layout]
[Dashboard] Fix memoization of `onLayoutChange` callback
(#217235)\n\nCloses
https://github.com/elastic/kibana/issues/217117\n\n## Summary\n\nIn the
dashboard grid component, we memoize the `onLayoutChange`\ncallback with
`viewMode` as a
dependency:\n\n\n64142047fb/src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/dashboard_grid.tsx (L80-L105)\n\nHowever,
on the `kbn-grid-layout` side, the subscription responsible for\ncalling
`onLayoutChange` was set up in a `useEffect` that did **not**\nhave the
`onLayoutChange` prop as a dependency - so even though the prop\nwas
changing, the subscription continued to use the original value.\n\nThat
means that if the dashboard starts in view mode, then
the\n`kbn-grid-layout` layout change subscription will always be calling
the\nversion of `onLayoutChange` where it returns early; and likewise
when\nyou start the dashboard in edit mode. By adding `onLayoutChange`
as a\ndependency to the `useEffect` that sets up the subscriptions, this
no\nlonger happens.\n\n###
Before\n\n\n\nhttps://github.com/user-attachments/assets/5df796f5-929d-4522-b438-64cc49292ed6\n\n###
After\n\n\n\nhttps://github.com/user-attachments/assets/286dd459-b429-40fb-8cb7-661b3f870214\n\n\n\n###
Checklist\n\n- [x] The PR description includes the appropriate Release
Notes section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"8382475eb5f68b804d6c7f1b59b50b4ff956c59e"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.0","label":"v9.0.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>

src/platform/packages/private/kbn-grid-layout/grid/grid_layout.tsx

@@ -90,6 +90,13 @@ export const GridLayout = ({
         }
       });
 
+    return () => {
+      onLayoutChangeSubscription.unsubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onLayoutChange]);
+
+  useEffect(() => {
     /**
      * This subscription ensures that rows get re-rendered when their orders change
      */
@@ -131,7 +138,6 @@ export const GridLayout = ({
     });
 
     return () => {
-      onLayoutChangeSubscription.unsubscribe();
       rowOrderSubscription.unsubscribe();
       gridLayoutClassSubscription.unsubscribe();
     };