Fix plugin sidebar panel rerender issues (#1279)

closes
RaspberryPiFoundation/digital-editor-issues#970

Author: loiswells97

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Fixed
+
+- Plugin sidebar panel rerendering (#1279)
+
 ## [0.34.1] - 2025-11-18
 
 ### Fixed

src/components/Menus/Sidebar/Sidebar.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { useSelector } from "react-redux";
@@ -80,22 +80,26 @@ const Sidebar = ({ options = [], plugins = [] }) => {
     },
   ].filter((option) => options.includes(option.name));
 
-  let pluginMenuOptions = plugins.map((plugin) => {
-    return {
-      name: plugin.name,
-      icon: plugin.icon,
-      title: plugin.title,
-      position: plugin.position || "top",
-      panel: () => (
-        <SidebarPanel
-          heading={plugin.heading}
-          buttons={plugin.buttons ? plugin.buttons() : []}
-        >
-          {plugin.panel()}
-        </SidebarPanel>
-      ),
-    };
-  });
+  let pluginMenuOptions = useMemo(
+    () =>
+      plugins.map((plugin) => {
+        return {
+          name: plugin.name,
+          icon: plugin.icon,
+          title: plugin.title,
+          position: plugin.position || "top",
+          panel: () => (
+            <SidebarPanel
+              heading={plugin.heading}
+              buttons={plugin.buttons ? plugin.buttons() : []}
+            >
+              {plugin.panel()}
+            </SidebarPanel>
+          ),
+        };
+      }),
+    [plugins],
+  );
 
   menuOptions = [...menuOptions, ...pluginMenuOptions];