diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d66ee22c..daa715d6c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/Menus/Sidebar/Sidebar.jsx b/src/components/Menus/Sidebar/Sidebar.jsx index 79a503328..696e3530e 100644 --- a/src/components/Menus/Sidebar/Sidebar.jsx +++ b/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: () => ( - - {plugin.panel()} - - ), - }; - }); + let pluginMenuOptions = useMemo( + () => + plugins.map((plugin) => { + return { + name: plugin.name, + icon: plugin.icon, + title: plugin.title, + position: plugin.position || "top", + panel: () => ( + + {plugin.panel()} + + ), + }; + }), + [plugins], + ); menuOptions = [...menuOptions, ...pluginMenuOptions];