From 03db6495c8cae8dda5d1084ef68d48602b4d5d18 Mon Sep 17 00:00:00 2001
From: Hilmi Erdem KEREN <erdemkeren@gmail.com>
Date: Thu, 2 May 2019 16:26:58 +0300
Subject: [PATCH] requestAnimationFrame optimization (#4115)

* requestAnimationFrame optimization

Optimizes animation by doing the following changes:

- Moves offsetWidth, innerWidth like expensive calculations out of requestAnimationFrame
- Adds menu mode change control before requesting the animation frame

* fix: Uses object destructuring to read state property
---
 src/pages/Account/Settings/Info.js | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/pages/Account/Settings/Info.js b/src/pages/Account/Settings/Info.js
index 799b7b87..2415de38 100644
--- a/src/pages/Account/Settings/Info.js
+++ b/src/pages/Account/Settings/Info.js
@@ -78,19 +78,23 @@ class Info extends Component {
     if (!this.main) {
       return;
     }
-    requestAnimationFrame(() => {
-      let mode = 'inline';
-      const { offsetWidth } = this.main;
-      if (offsetWidth < 641 && offsetWidth > 400) {
-        mode = 'horizontal';
-      }
-      if (window.innerWidth < 768 && offsetWidth > 400) {
-        mode = 'horizontal';
-      }
-      this.setState({
-        mode,
-      });
-    });
+
+    const { mode: currentMode } = this.state;
+
+    let mode = 'inline';
+    const { offsetWidth } = this.main;
+
+    if (offsetWidth > 400 && offsetWidth < 641) {
+      mode = 'horizontal';
+    }
+
+    if (window.innerWidth < 768 && offsetWidth > 400) {
+      mode = 'horizontal';
+    }
+
+    if (mode !== currentMode) {
+      requestAnimationFrame(() => this.setState({ mode }));
+    }
   };
 
   render() {
-- 
GitLab