From 9210fb6616b611a3718147a06db080bc85c3d922 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 22 Mar 2026 03:25:50 +0100
Subject: [PATCH] fix: use stable SECTIONS array to prevent unnecessary
 re-renders

Remove `as const` + spread pattern that created a new array on
every render, triggering useLayoutEffect re-registration. Use
typed SettingsSection[] constant instead.
---
 .../src/components/modals/settingsPanels/InstancePanel.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/components/modals/settingsPanels/InstancePanel.tsx b/packages/web/src/components/modals/settingsPanels/InstancePanel.tsx
index bdf88301..8e3dbb3a 100644
--- a/packages/web/src/components/modals/settingsPanels/InstancePanel.tsx
+++ b/packages/web/src/components/modals/settingsPanels/InstancePanel.tsx
@@ -1,22 +1,23 @@
 import { useEffect } from 'react';
 import { useSettingsStore } from '../../../stores/settingsStore';
 import { useSettingsSections } from '../../../hooks/useSettingsSections';
+import type { SettingsSection } from '../SettingsSectionsContext';
 import { GeneralPanel } from '../instanceSettingsPanels/GeneralPanel';
 import { StreamingPanel } from '../instanceSettingsPanels/StreamingPanel';
 import { StoragePanel } from '../instanceSettingsPanels/StoragePanel';
 import { UsersPanel } from '../instanceSettingsPanels/UsersPanel';
 
-const SECTIONS = [
+const SECTIONS: SettingsSection[] = [
   { id: 'general', label: 'General' },
   { id: 'streaming', label: 'Streaming' },
   { id: 'storage', label: 'Storage' },
   { id: 'users', label: 'Users' },
-] as const;
+];
 
 export function InstancePanel() {
   const fetchInstanceSettings = useSettingsStore((s) => s.fetchInstanceSettings);
   const fetchStreamingLimits = useSettingsStore((s) => s.fetchStreamingLimits);
-  const { sectionRef } = useSettingsSections([...SECTIONS]);
+  const { sectionRef } = useSettingsSections(SECTIONS);
 
   useEffect(() => {
     fetchInstanceSettings();