diff --git a/web/src/Sidebar.jsx b/web/src/Sidebar.jsx
index aa7ad4d6d..40306ef2a 100644
--- a/web/src/Sidebar.jsx
+++ b/web/src/Sidebar.jsx
@@ -3,6 +3,7 @@ import LinkedLogo from './components/LinkedLogo';
 import { Match } from 'preact-router/match';
 import { memo } from 'preact/compat';
 import { ENV } from './env';
+import { useMemo } from 'preact/hooks'
 import useSWR from 'swr';
 import NavigationDrawer, { Destination, Separator } from './components/NavigationDrawer';
 
@@ -19,42 +20,14 @@ export default function Sidebar() {
       <Match path="/cameras/:camera/:other?">
         {({ matches }) =>
           matches ? (
-            <Fragment>
-              <Separator />
-              {Object.entries(cameras)
-                .filter(([_, conf]) => conf.ui.show)
-                .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1))
-                .map(([camera]) => (
-                  <Destination key={camera} href={`/cameras/${camera}`} text={camera} />
-                ))}
-              <Separator />
-            </Fragment>
+            <SortedCameras unsortedCameras={cameras} />
           ) : null
         }
       </Match>
       <Match path="/recording/:camera/:date?/:hour?/:seconds?">
         {({ matches }) =>
           matches ? (
-            <Fragment>
-              <Separator />
-              {Object.entries(cameras)
-                .filter(([_, conf]) => conf.gui.show)
-                .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1))
-                .map(([camera, conf]) => {
-                  if (conf.record.enabled) {
-                    return (
-                      <Destination
-                        key={camera}
-                        path={`/recording/${camera}/:date?/:hour?/:seconds?`}
-                        href={`/recording/${camera}`}
-                        text={camera}
-                      />
-                    );
-                  }
-                  return null;
-                })}
-              <Separator />
-            </Fragment>
+            <SortedRecordingCameras unsortedCameras={cameras} />
           ) : null
         }
       </Match>
@@ -75,6 +48,54 @@ export default function Sidebar() {
   );
 }
 
+function SortedCameras({ unsortedCameras }) {
+
+  const sortedCameras = useMemo(() => {
+    Object.entries(unsortedCameras)
+      .filter(([_, conf]) => conf.ui.show)
+      .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1))
+  }, [unsortedCameras]);
+
+  return (
+    <Fragment>
+      <Separator />
+      {sortedCameras.map(([camera]) => (
+        <Destination key={camera} href={`/cameras/${camera}`} text={camera} /> 
+      ))}
+      <Separator />
+    </Fragment>
+  );
+}
+
+function SortedRecordingCameras({ unsortedCameras }) {
+
+  const sortedCameras = useMemo(() => {
+    Object.entries(unsortedCameras)
+      .filter(([_, conf]) => conf.ui.show)
+      .sort(([_, aConf], [__, bConf]) => aConf.ui.order === bConf.ui.order ? 0 : (aConf.ui.order > bConf.ui.order ? 1 : -1))
+  }, [unsortedCameras]);
+
+  return (
+    <Fragment>
+      <Separator />
+      {sortedCameras.map(([camera, conf]) => {
+        if (conf.record.enabled) {
+          return (
+            <Destination
+              key={camera}
+              path={`/recording/${camera}/:date?/:hour?/:seconds?`}
+              href={`/recording/${camera}`}
+              text={camera}
+            />
+          );
+        }
+        return null;
+      })}
+      <Separator />
+    </Fragment>
+  );
+}
+
 const Header = memo(() => {
   return (
     <div className="text-gray-500">