diff --git a/.eslintrc b/.eslintrc
index 300df3df6..574ba5fb6 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -47,7 +47,7 @@
     "prettier/prettier": ["error", null, "@prettier"],
     "react/no-deprecated": 1,
     "react/jsx-no-target-blank": 1,
-    "react/destructuring-assignment": ["warn", "always"],
+    "react/destructuring-assignment": ["error", "always"],
     "react/forbid-component-props": ["warn", { "forbid": ["style"] }],
     "react/no-this-in-sfc": ["warn"],
     "react/no-unsafe": ["warn"],
diff --git a/src/webui/app.js b/src/webui/app.js
index c3db1127f..3d0edaed9 100644
--- a/src/webui/app.js
+++ b/src/webui/app.js
@@ -36,7 +36,8 @@ export default class App extends Component {
 
   // eslint-disable-next-line no-unused-vars
   componentDidUpdate(_, prevState) {
-    if (prevState.isUserLoggedIn !== this.state.isUserLoggedIn) {
+    const { isUserLoggedIn } = this.state;
+    if (prevState.isUserLoggedIn !== isUserLoggedIn) {
       this.loadPackages();
     }
   }
diff --git a/src/webui/components/Header/index.js b/src/webui/components/Header/index.js
index ebf4c4e25..29bc3e9d4 100644
--- a/src/webui/components/Header/index.js
+++ b/src/webui/components/Header/index.js
@@ -91,17 +91,19 @@ class Header extends Component<IProps, IState> {
    * close/open popover menu for logged in users.
    */
   handleToggleLogin = () => {
+    const { onToggleLoginModal } = this.props;
     this.setState(
       {
         anchorEl: null,
       },
-      this.props.onToggleLoginModal
+      onToggleLoginModal
     );
   };
 
   handleToggleMNav = () => {
+    const { showMobileNavBar } = this.state;
     this.setState({
-      showMobileNavBar: !this.state.showMobileNavBar,
+      showMobileNavBar: !showMobileNavBar,
     });
   };
 
diff --git a/src/webui/components/Login/index.js b/src/webui/components/Login/index.js
index 00e16f1bc..04aa15f40 100644
--- a/src/webui/components/Login/index.js
+++ b/src/webui/components/Login/index.js
@@ -55,11 +55,12 @@ export default class LoginModal extends Component {
    * Required to login
    */
   setCredentials = (name, e) => {
+    const { form } = this.state;
     this.setState({
       form: {
-        ...this.state.form,
+        ...form,
         [name]: {
-          ...this.state.form[name],
+          ...form[name],
           value: e.target.value,
           pristine: false,
         },
@@ -76,30 +77,32 @@ export default class LoginModal extends Component {
   }
 
   validateCredentials = (event) => {
+    const { form } = this.state;
     // prevents default submit behavior
     event.preventDefault();
 
     this.setState({
-      form: Object.keys(this.state.form).reduce((acc, key) => ({
+      form: Object.keys(form).reduce((acc, key) => ({
         ...acc,
-        ...{ [key]: {...this.state.form[key], pristine: false } },
+        ...{ [key]: {...form[key], pristine: false } },
       }), {}),
     }, () => {
-      if (!Object.keys(this.state.form).some(id => !this.state.form[id])) {
+      if (!Object.keys(form).some(id => !form[id])) {
         this.submitCredentials();
       }
     });
   }
 
   submitCredentials = async () => {
-    const { form: { username, password } } = this.state;
-    await this.props.onSubmit(username.value, password.value);
+    const { form } = this.state;
+    const { onSubmit } = this.props;
+    await onSubmit(form.username.value, form.password.value);
     // let's wait for API response and then set
     // username and password filed to empty state
     this.setState({
-     form: Object.keys(this.state.form).reduce((acc, key) => ({
+     form: Object.keys(form).reduce((acc, key) => ({
       ...acc,
-      ...{ [key]: {...this.state.form[key], value: "", pristine: true } },
+      ...{ [key]: {...form[key], value: "", pristine: true } },
     }), {}),
     });
   }
diff --git a/src/webui/utils/asyncComponent.js b/src/webui/utils/asyncComponent.js
index 63a7c9085..544fae0cf 100644
--- a/src/webui/utils/asyncComponent.js
+++ b/src/webui/utils/asyncComponent.js
@@ -6,13 +6,15 @@ export function asyncComponent(getComponent) {
     state = {Component: AsyncComponent.Component};
 
     componentDidMount() {
-      if (!this.state.Component) {
+      const { Component } = this.state;
+      if (!Component) {
         getComponent().then(({default: Component}) => {
           AsyncComponent.Component = Component;
           this.setState({Component});
         });
       }
     }
+    
     render() {
       const {Component} = this.state;
       if (Component) {