useCallback

packages/app/src/components/Admin/App/MaintenanceMode.tsx

@@ -20,19 +20,19 @@ export const MaintenanceMode: FC = () => {
 
   const [isModalOpen, setModalOpen] = useState<boolean>(false);
 
-  const startMaintenanceMode = async() => {
+  const startMaintenanceMode = useCallback(async() => {
     await apiv3Post('/app-settings/maintenance-mode', { flag: true });
     return;
-  }
+  }, []);
 
-  const endMaintenanceMode = async() => {
+  const endMaintenanceMode = useCallback(async() => {
     await apiv3Post('/app-settings/maintenance-mode', { flag: false });
     return;
-  }
+  }, []);
 
-  const openModal = () => { setModalOpen(true) };
+  const openModal = useCallback(() => { setModalOpen(true) }, []);
 
-  const closeModal = () => { setModalOpen(false) };
+  const closeModal = useCallback(() => { setModalOpen(false) }, []);
 
   const onConfirmHandler = useCallback(async() => {
     closeModal();

packages/app/src/components/MaintenanceMode.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import { useTranslation } from 'next-i18next';
 
 import { toastError } from '~/client/util/apiNotification';
@@ -10,7 +10,7 @@ export const MaintenanceMode: FC = () => {
 
   const { data: currentUser } = useCurrentUser();
 
-  const logoutHandler = async() => {
+  const logoutHandler = useCallback(async() => {
     try {
       await apiv3Post('/logout');
       window.location.reload();
@@ -18,7 +18,7 @@ export const MaintenanceMode: FC = () => {
     catch (err) {
       toastError(err);
     }
-  };
+  }, []);
 
   return (
     <div id="content-main" className="content-main container-lg">