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.
This commit is contained in:
Jannis Braun
2026-03-22 03:25:50 +01:00
parent d96d2d4dd1
commit 9210fb6616
@@ -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();