perf: prevent mobx state updates outside of actions

Author: jamaljsr

app/src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { configure } from 'mobx';
 import 'mobx-react-lite/batchingForReactDom';
 import './i18n';
 import './index.css';
@@ -8,6 +9,9 @@ import App from './App';
 
 log.info('Rendering the App');
 
+// ensure all state updates are made inside of an action
+configure({ enforceActions: 'observed' });
+
 ReactDOM.render(
   <React.StrictMode>
     <App />

app/src/store/store.ts

@@ -1,4 +1,4 @@
-import { autorun, observable } from 'mobx';
+import { action, autorun, observable, runInAction } from 'mobx';
 import { IS_DEV, IS_TEST } from 'config';
 import AppStorage from 'util/appStorage';
 import CsvExporter from 'util/csv';
@@ -65,30 +65,37 @@ export class Store {
   /**
    * load initial data to populate the store
    */
+  @action.bound
   async init() {
     this.settingsStore.init();
     await this.authStore.init();
-    this.initialized = true;
+    runInAction('init', () => {
+      this.initialized = true;
+    });
 
     // this function will automatically run whenever the authenticated
     // flag is changed
-    autorun(async () => {
-      if (this.authStore.authenticated) {
-        // go to the Loop page when the user is authenticated. it can be from
-        // entering a password or from loading the credentials from storage
-        this.uiStore.goToLoop();
-        // also fetch all the data we need
-        this.fetchAllData();
-      } else {
-        // go to auth page if we are not authenticated
-        this.uiStore.gotoAuth();
-      }
-    });
+    autorun(
+      async () => {
+        if (this.authStore.authenticated) {
+          // go to the Loop page when the user is authenticated. it can be from
+          // entering a password or from loading the credentials from storage
+          this.uiStore.goToLoop();
+          // also fetch all the data we need
+          this.fetchAllData();
+        } else {
+          // go to auth page if we are not authenticated
+          this.uiStore.gotoAuth();
+        }
+      },
+      { name: 'authenticatedAutorun' },
+    );
   }
 
   /**
    * makes the initial API calls to fetch the data we need to display in the app
    */
+  @action.bound
   async fetchAllData() {
     await this.nodeStore.fetchInfo();
     await this.channelStore.fetchChannels();

app/src/store/stores/authStore.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, runInAction } from 'mobx';
 import { prefixTranslation } from 'util/translate';
 import { Store } from 'store';
 
@@ -59,8 +59,10 @@ export default class AuthStore {
     await this._store.api.lnd.getInfo();
     // if no error is thrown above then the credentials are valid
     this._store.log.info('authentication successful');
-    // setting this to true will automatically show the Loop page
-    this.authenticated = true;
+    runInAction('validateContinuation', () => {
+      // setting this to true will automatically show the Loop page
+      this.authenticated = true;
+    });
   }
 
   /**

app/src/store/stores/settingsStore.ts

@@ -56,15 +56,18 @@ export default class SettingsStore {
   @action.bound
   init() {
     this.load();
-    autorun(() => {
-      const settings: PersistentSettings = {
-        sidebarVisible: this.sidebarVisible,
-        unit: this.unit,
-        balanceMode: this.balanceMode,
-      };
-      this._store.storage.set('settings', settings);
-      this._store.log.info('saved settings to localStorage', settings);
-    });
+    autorun(
+      () => {
+        const settings: PersistentSettings = {
+          sidebarVisible: this.sidebarVisible,
+          unit: this.unit,
+          balanceMode: this.balanceMode,
+        };
+        this._store.storage.set('settings', settings);
+        this._store.log.info('saved settings to localStorage', settings);
+      },
+      { name: 'settingsAutorun' },
+    );
   }
 
   /**

app/src/store/stores/uiStore.ts

@@ -85,6 +85,7 @@ export default class UiStore {
   }
 
   /** handle errors by showing a notification and/or the auth screen */
+  @action.bound
   handleError(error: Error, title?: string) {
     if (error instanceof AuthenticationError) {
       // this will automatically redirect to the auth page