1 files changed, 20 insertions, 24 deletions
diff --git a/frontend/src/components/PluginView.tsx b/frontend/src/components/PluginView.tsx
index 19afbca5..1d39972e 100644
--- a/frontend/src/components/PluginView.tsx
+++ b/frontend/src/components/PluginView.tsx
@@ -1,27 +1,26 @@
 import { ButtonItem, ErrorBoundary, Focusable, PanelSection, PanelSectionRow } from '@decky/ui';
-import { FC, useEffect, useState } from 'react';
+import { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaEyeSlash } from 'react-icons/fa';
 
-import { Plugin } from '../plugin';
 import { useDeckyState } from './DeckyState';
 import NotificationBadge from './NotificationBadge';
 import { useQuickAccessVisible } from './QuickAccessVisibleState';
 import TitleView from './TitleView';
 
 const PluginView: FC = () => {
-  const { hiddenPlugins } = useDeckyState();
-  const { plugins, updates, activePlugin, pluginOrder, setActivePlugin, closeActivePlugin } = useDeckyState();
+  const { plugins, hiddenPlugins, updates, activePlugin, pluginOrder, setActivePlugin, closeActivePlugin } =
+    useDeckyState();
   const visible = useQuickAccessVisible();
   const { t } = useTranslation();
 
-  const [pluginList, setPluginList] = useState<Plugin[]>(
-    plugins.sort((a, b) => pluginOrder.indexOf(a.name) - pluginOrder.indexOf(b.name)),
-  );
-
-  useEffect(() => {
-    setPluginList(plugins.sort((a, b) => pluginOrder.indexOf(a.name) - pluginOrder.indexOf(b.name)));
+  const pluginList = useMemo(() => {
     console.log('updating PluginView after changes');
+
+    return [...plugins]
+      .sort((a, b) => pluginOrder.indexOf(a.name) - pluginOrder.indexOf(b.name))
+      .filter((p) => p.content)
+      .filter(({ name }) => !hiddenPlugins.includes(name));
   }, [plugins, pluginOrder]);
 
   if (activePlugin) {
@@ -43,20 +42,17 @@ const PluginView: FC = () => {
         }}
       >
         <PanelSection>
-          {pluginList
-            .filter((p) => p.content)
-            .filter(({ name }) => !hiddenPlugins.includes(name))
-            .map(({ name, icon }) => (
-              <PanelSectionRow key={name}>
-                <ButtonItem layout="below" onClick={() => setActivePlugin(name)}>
-                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                    {icon}
-                    <div>{name}</div>
-                    <NotificationBadge show={updates?.has(name)} style={{ top: '-5px', right: '-5px' }} />
-                  </div>
-                </ButtonItem>
-              </PanelSectionRow>
-            ))}
+          {pluginList.map(({ name, icon }) => (
+            <PanelSectionRow key={name}>
+              <ButtonItem layout="below" onClick={() => setActivePlugin(name)}>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  {icon}
+                  <div>{name}</div>
+                  <NotificationBadge show={updates?.has(name)} style={{ top: '-5px', right: '-5px' }} />
+                </div>
+              </ButtonItem>
+            </PanelSectionRow>
+          ))}
           {hiddenPlugins.length > 0 && (
             <div style={{ display: 'flex', alignItems: 'center', gap: '10px', fontSize: '0.8rem', marginTop: '10px' }}>
               <FaEyeSlash />