diff --git a/app/assets/javascripts/components/NoAccountWarning.tsx b/app/assets/javascripts/components/NoAccountWarning.tsx
index f9f8ea719..680393604 100644
--- a/app/assets/javascripts/components/NoAccountWarning.tsx
+++ b/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;
}
diff --git a/app/assets/javascripts/components/SearchOptions.tsx b/app/assets/javascripts/components/SearchOptions.tsx
index 8d1d93eea..fca445481 100644
--- a/app/assets/javascripts/components/SearchOptions.tsx
+++ b/app/assets/javascripts/components/SearchOptions.tsx
@@ -24,11 +24,14 @@ function SearchOptions({ appState }: Props) {
includeProtectedContents,
includeArchived,
includeTrashed,
- } = useAutorunValue(() => ({
- includeProtectedContents: searchOptions.includeProtectedContents,
- includeArchived: searchOptions.includeArchived,
- includeTrashed: searchOptions.includeTrashed,
- }));
+ } = useAutorunValue(
+ () => ({
+ includeProtectedContents: searchOptions.includeProtectedContents,
+ includeArchived: searchOptions.includeArchived,
+ includeTrashed: searchOptions.includeTrashed,
+ }),
+ [searchOptions]
+ );
const [
togglingIncludeProtectedContents,
diff --git a/app/assets/javascripts/components/SessionsModal.tsx b/app/assets/javascripts/components/SessionsModal.tsx
index e00b07a26..b8c82daf4 100644
--- a/app/assets/javascripts/components/SessionsModal.tsx
+++ b/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<{
{SessionStrings.RevokeText}
-
-
+
+
@@ -243,8 +243,9 @@ const Sessions: FunctionComponent<{
appState: AppState;
application: WebApplication;
}> = ({ appState, application }) => {
- const [showModal, setShowModal] = useState(false);
- useAutorun(() => setShowModal(appState.isSessionsModalVisible));
+ const showModal = useAutorunValue(() => appState.isSessionsModalVisible, [
+ appState,
+ ]);
if (showModal) {
return ;
diff --git a/app/assets/javascripts/components/utils.ts b/app/assets/javascripts/components/utils.ts
index eb0f6465b..33e437c46 100644
--- a/app/assets/javascripts/components/utils.ts
+++ b/app/assets/javascripts/components/utils.ts
@@ -1,25 +1,18 @@
-import { WebApplication } from '@/ui_models/application';
-import { AppState } from '@/ui_models/app_state';
-import { autorun, IAutorunOptions, IReactionPublic } from 'mobx';
+import { autorun } from 'mobx';
import { FunctionComponent, h, render } from 'preact';
-import { useEffect } from 'preact/hooks';
-import { useState } from 'react';
+import { Inputs, useEffect, useState } from 'preact/hooks';
-export function useAutorunValue(query: () => T): T {
+export function useAutorunValue(query: () => T, inputs: Inputs): T {
const [value, setValue] = useState(query);
- useAutorun(() => {
- setValue(query());
- });
+ useEffect(() => {
+ 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(
component: FunctionComponent,
scope: Record = {}
@@ -37,10 +30,7 @@ export function toDirective(
}
return {
$onChanges() {
- render(
- h(component, $scope),
- $element[0]
- );
+ render(h(component, $scope), $element[0]);
},
};
},