devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 28 Packages Projects Releases 1 Wiki Activity

fix: use stable SECTIONS array to prevent unnecessary re-renders

Browse Source 
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 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/modals/settingsPanels/InstancePanel.tsx
+4 -3
View File
@@ -1,22 +1,23 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useSettingsStore } from '../../../stores/settingsStore'; import { useSettingsStore } from '../../../stores/settingsStore';
import { useSettingsSections } from '../../../hooks/useSettingsSections'; import { useSettingsSections } from '../../../hooks/useSettingsSections';
import type { SettingsSection } from '../SettingsSectionsContext';
import { GeneralPanel } from '../instanceSettingsPanels/GeneralPanel'; import { GeneralPanel } from '../instanceSettingsPanels/GeneralPanel';
import { StreamingPanel } from '../instanceSettingsPanels/StreamingPanel'; import { StreamingPanel } from '../instanceSettingsPanels/StreamingPanel';
import { StoragePanel } from '../instanceSettingsPanels/StoragePanel'; import { StoragePanel } from '../instanceSettingsPanels/StoragePanel';
import { UsersPanel } from '../instanceSettingsPanels/UsersPanel'; import { UsersPanel } from '../instanceSettingsPanels/UsersPanel';
const SECTIONS = [ const SECTIONS: SettingsSection[] = [
{ id: 'general', label: 'General' }, { id: 'general', label: 'General' },
{ id: 'streaming', label: 'Streaming' }, { id: 'streaming', label: 'Streaming' },
{ id: 'storage', label: 'Storage' }, { id: 'storage', label: 'Storage' },
{ id: 'users', label: 'Users' }, { id: 'users', label: 'Users' },
] as const; ];
export function InstancePanel() { export function InstancePanel() {
const fetchInstanceSettings = useSettingsStore((s) => s.fetchInstanceSettings); const fetchInstanceSettings = useSettingsStore((s) => s.fetchInstanceSettings);
const fetchStreamingLimits = useSettingsStore((s) => s.fetchStreamingLimits); const fetchStreamingLimits = useSettingsStore((s) => s.fetchStreamingLimits);
const { sectionRef } = useSettingsSections([...SECTIONS]); const { sectionRef } = useSettingsSections(SECTIONS);
useEffect(() => { useEffect(() => {
fetchInstanceSettings(); fetchInstanceSettings();