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

@@ -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() {