memo all the things

Somehow things got slower on local dev

src/components/background-service.jsx

@@ -1,3 +1,4 @@
+import { memo } from 'preact/compat';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { api } from '../utils/api';
@@ -5,7 +6,7 @@ import states, { saveStatus } from '../utils/states';
 import useInterval from '../utils/useInterval';
 import usePageVisibility from '../utils/usePageVisibility';
 
-export default function BackgroundService({ isLoggedIn }) {
+export default memo(function BackgroundService({ isLoggedIn }) {
   // Notifications service
   // - WebSocket to receive notifications when page is visible
   const [visible, setVisible] = useState(true);
@@ -89,4 +90,4 @@ export default function BackgroundService({ isLoggedIn }) {
   });
 
   return null;
-}
+});

src/components/keyboard-shortcuts-help.jsx

@@ -1,5 +1,6 @@
 import './keyboard-shortcuts-help.css';
 
+import { memo } from 'preact/compat';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSnapshot } from 'valtio';
 
@@ -8,7 +9,7 @@ import states from '../utils/states';
 import Icon from './icon';
 import Modal from './modal';
 
-export default function KeyboardShortcutsHelp() {
+export default memo(function KeyboardShortcutsHelp() {
   const snapStates = useSnapshot(states);
 
   function onClose() {
@@ -161,4 +162,4 @@ export default function KeyboardShortcutsHelp() {
       </Modal>
     )
   );
-}
+});

src/components/notification-service.jsx

@@ -1,3 +1,4 @@
+import { memo } from 'preact/compat';
 import { useLayoutEffect, useState } from 'preact/hooks';
 import { useSnapshot } from 'valtio';
 
@@ -14,7 +15,7 @@ import Link from './link';
 import Modal from './modal';
 import Notification from './notification';
 
-export default function NotificationService() {
+export default memo(function NotificationService() {
   if (!('serviceWorker' in navigator)) return null;
 
   const snapStates = useSnapshot(states);
@@ -179,4 +180,4 @@ export default function NotificationService() {
   }
 
   return null;
-}
+});

src/components/search-command.jsx

@@ -1,11 +1,12 @@
 import './search-command.css';
 
+import { memo } from 'preact/compat';
 import { useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import SearchForm from './search-form';
 
-export default function SearchCommand({ onClose = () => {} }) {
+export default memo(function SearchCommand({ onClose = () => {} }) {
   const [showSearch, setShowSearch] = useState(false);
   const searchFormRef = useRef(null);
 
@@ -64,4 +65,4 @@ export default function SearchCommand({ onClose = () => {} }) {
       />
     </div>
   );
-}
+});