fix: excessive autorun calls

app/assets/javascripts/components/NoAccountWarning.tsx

@@ -5,7 +5,9 @@ import { AppState } from '@/ui_models/app_state';
 type Props = { appState: AppState };
 
 function NoAccountWarning({ appState }: Props) {
-  const canShow = useAutorunValue(() => appState.noAccountWarning.show);
+  const canShow = useAutorunValue(() => appState.noAccountWarning.show, [
+    appState,
+  ]);
   if (!canShow) {
     return null;
   }

app/assets/javascripts/components/SearchOptions.tsx

@@ -24,11 +24,14 @@ function SearchOptions({ appState }: Props) {
     includeProtectedContents,
     includeArchived,
     includeTrashed,
-  } = useAutorunValue(() => ({
+  } = useAutorunValue(
-    includeProtectedContents: searchOptions.includeProtectedContents,
+    () => ({
-    includeArchived: searchOptions.includeArchived,
+      includeProtectedContents: searchOptions.includeProtectedContents,
-    includeTrashed: searchOptions.includeTrashed,
+      includeArchived: searchOptions.includeArchived,
-  }));
+      includeTrashed: searchOptions.includeTrashed,
+    }),
+    [searchOptions]
+  );
 
   const [
     togglingIncludeProtectedContents,

app/assets/javascripts/components/SessionsModal.tsx

@@ -15,7 +15,7 @@ import {
   AlertDialogDescription,
   AlertDialogLabel,
 } from '@reach/alert-dialog';
-import { toDirective, useAutorun } from './utils';
+import { toDirective, useAutorunValue } from './utils';
 import { WebApplication } from '@/ui_models/application';
 
 type Session = RemoteSession & {
@@ -211,22 +211,22 @@ const SessionsModal: FunctionComponent<{
                       <p>{SessionStrings.RevokeText}</p>
                     </AlertDialogDescription>
                     <div className="flex my-1 gap-2">
-                        <button
+                      <button
-                          className="sn-button neutral sk-label"
+                        className="sn-button neutral sk-label"
-                          ref={cancelRevokeRef}
+                        ref={cancelRevokeRef}
-                          onClick={closeRevokeSessionAlert}
+                        onClick={closeRevokeSessionAlert}
-                        >
+                      >
-                          <span>{SessionStrings.RevokeCancelButton}</span>
+                        <span>{SessionStrings.RevokeCancelButton}</span>
-                        </button>
+                      </button>
-                        <button
+                      <button
-                          className="sn-button danger sk-label"
+                        className="sn-button danger sk-label"
-                          onClick={() => {
+                        onClick={() => {
-                            closeRevokeSessionAlert();
+                          closeRevokeSessionAlert();
-                            revokeSession(confirmRevokingSessionUuid);
+                          revokeSession(confirmRevokingSessionUuid);
-                          }}
+                        }}
-                        >
+                      >
-                          <span>{SessionStrings.RevokeConfirmButton}</span>
+                        <span>{SessionStrings.RevokeConfirmButton}</span>
-                        </button>
+                      </button>
                     </div>
                   </div>
                 </div>
@@ -243,8 +243,9 @@ const Sessions: FunctionComponent<{
   appState: AppState;
   application: WebApplication;
 }> = ({ appState, application }) => {
-  const [showModal, setShowModal] = useState(false);
+  const showModal = useAutorunValue(() => appState.isSessionsModalVisible, [
-  useAutorun(() => setShowModal(appState.isSessionsModalVisible));
+    appState,
+  ]);
 
   if (showModal) {
     return <SessionsModal application={application} appState={appState} />;

app/assets/javascripts/components/utils.ts

@@ -1,25 +1,18 @@
-import { WebApplication } from '@/ui_models/application';
+import { autorun } from 'mobx';
-import { AppState } from '@/ui_models/app_state';
-import { autorun, IAutorunOptions, IReactionPublic } from 'mobx';
 import { FunctionComponent, h, render } from 'preact';
-import { useEffect } from 'preact/hooks';
+import { Inputs, useEffect, useState } from 'preact/hooks';
-import { useState } from 'react';
 
-export function useAutorunValue<T>(query: () => T): T {
+export function useAutorunValue<T>(query: () => T, inputs: Inputs): T {
   const [value, setValue] = useState(query);
-  useAutorun(() => {
+  useEffect(() => {
-    setValue(query());
+    return autorun(() => {
-  });
+      setValue(query());
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, inputs);
   return value;
 }
 
-export function useAutorun(
-  view: (r: IReactionPublic) => unknown,
-  opts?: IAutorunOptions
-): void {
-  useEffect(() => autorun(view, opts), [view, opts]);
-}
-
 export function toDirective<Props>(
   component: FunctionComponent<Props>,
   scope: Record<string, '=' | '&'> = {}
@@ -37,10 +30,7 @@ export function toDirective<Props>(
           }
           return {
             $onChanges() {
-              render(
+              render(h(component, $scope), $element[0]);
-                h(component, $scope),
-                $element[0]
-              );
             },
           };
         },