From 1f410a5522971aafa2cc0abdc9c6664d69da092f Mon Sep 17 00:00:00 2001
From: Taya Leutina <leutinatasya@yandex-team.ru>
Date: Fri, 27 Sep 2024 16:29:19 +0300
Subject: [PATCH] fix: add memorizing some props in MobileLayout (#206)

* fix: add memorizing some props in MobileLayout

* fix: adjust memorization
---
 src/components/MobileLayout/MobileLayout.js | 47 ++++++++++++++++++---
 1 file changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/components/MobileLayout/MobileLayout.js b/src/components/MobileLayout/MobileLayout.js
index 776c9f7..cef66f2 100644
--- a/src/components/MobileLayout/MobileLayout.js
+++ b/src/components/MobileLayout/MobileLayout.js
@@ -14,6 +14,11 @@ export default class MobileLayout extends React.PureComponent {
     static contextType = DashKitContext;
 
     pluginsRefs = [];
+    sortedLayoutItems;
+
+    _memoLayout = this.context.layout;
+    _memoForwardedPluginRef = [];
+    _memoAdjustWidgetLayout = [];
 
     state = {
         activeTabId: null,
@@ -29,6 +34,30 @@ export default class MobileLayout extends React.PureComponent {
         }
     }
 
+    getSortedLayoutItems() {
+        if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {
+            return this.sortedLayoutItems;
+        }
+
+        this._memoLayout = this.context.layout;
+
+        const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId));
+
+        this.sortedLayoutItems = getSortedConfigItems(this.context.config, hasOrderId);
+
+        return this.sortedLayoutItems;
+    }
+
+    getMemoForwardRefCallback = (refIndex) => {
+        if (!this._memoForwardedPluginRef[refIndex]) {
+            this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
+                this.pluginsRefs[refIndex] = pluginRef;
+            };
+        }
+
+        return this._memoForwardedPluginRef[refIndex];
+    };
+
     adjustWidgetLayout = (index, {needSetDefault}) => {
         if (needSetDefault) {
             const indexesOfItemsWithActiveAutoheight = {
@@ -48,6 +77,14 @@ export default class MobileLayout extends React.PureComponent {
         }
     };
 
+    getMemoAdjustWidgetLayout = (index) => {
+        if (!this._memoAdjustWidgetLayout[index]) {
+            this._memoAdjustWidgetLayout[index] = this.adjustWidgetLayout.bind(this, index);
+        }
+
+        return this._memoAdjustWidgetLayout[index];
+    };
+
     onMountChange = (isMounted) => {
         if (isMounted) {
             this._inited = true;
@@ -83,14 +120,14 @@ export default class MobileLayout extends React.PureComponent {
 
         this.pluginsRefs.length = config.items.length;
 
-        const hasOrderId = Boolean(config.items.find((item) => item.orderId));
-        const sortedItems = getSortedConfigItems(config, hasOrderId);
+        const sortedItems = this.getSortedLayoutItems();
 
         return (
             <div className={b()}>
                 {sortedItems.map((item, index) => {
                     const isItemWithActiveAutoheight =
                         index in this.state.indexesOfItemsWithActiveAutoheight;
+
                     return (
                         <div
                             className={b('item', {autoheight: isItemWithActiveAutoheight})}
@@ -101,10 +138,8 @@ export default class MobileLayout extends React.PureComponent {
                                 item={item}
                                 layout={layout}
                                 shouldItemUpdate={false}
-                                adjustWidgetLayout={this.adjustWidgetLayout.bind(this, index)}
-                                forwardedPluginRef={(pluginRef) => {
-                                    this.pluginsRefs[index] = pluginRef;
-                                }}
+                                adjustWidgetLayout={this.getMemoAdjustWidgetLayout(index)}
+                                forwardedPluginRef={this.getMemoForwardRefCallback(index)}
                                 onMountChange={this.onMountChange}
                                 onBeforeLoad={this.onBeforeLoad}
                             />