fix fast refresh

web/src/components/config-form/sections/ConfigSectionTemplate.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { createConfigSection } from "./BaseSection";
+import { ConfigSection } from "./BaseSection";
 import type { BaseSectionProps, SectionConfig } from "./BaseSection";
 import { getSectionConfig } from "@/utils/sectionConfigsUtils";
 
@@ -19,17 +19,10 @@ export function ConfigSectionTemplate({
     [sectionKey, level],
   );
 
-  const SectionComponent = useMemo(
-    () =>
-      createConfigSection({
-        sectionPath: sectionKey,
-        defaultConfig,
-      }),
-    [sectionKey, defaultConfig],
-  );
-
   return (
-    <SectionComponent
+    <ConfigSection
+      sectionPath={sectionKey}
+      defaultConfig={defaultConfig}
       level={level}
       sectionConfig={sectionConfig ?? defaultConfig}
       {...rest}

web/src/components/config-form/sections/index.ts

@@ -2,10 +2,11 @@
 // Reusable components for both global and camera-level settings
 
 export {
-  createConfigSection,
+  ConfigSection,
   type BaseSectionProps,
   type SectionConfig,
   type CreateSectionOptions,
+  type ConfigSectionProps,
 } from "./BaseSection";
 export {
   ConfigSectionTemplate,

web/src/pages/Settings.tsx

@@ -39,7 +39,10 @@ import FrigatePlusSettingsView from "@/views/settings/FrigatePlusSettingsView";
 import MaintenanceSettingsView from "@/views/settings/MaintenanceSettingsView";
 import GlobalConfigView from "@/views/settings/GlobalConfigView";
 import CameraConfigView from "@/views/settings/CameraConfigView";
-import { createSingleSectionPage } from "@/views/settings/SingleSectionPage";
+import {
+  SingleSectionPage,
+  type SettingsPageProps,
+} from "@/views/settings/SingleSectionPage";
 import { useSearchEffect } from "@/hooks/use-overlay-state";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { useInitialCameraState } from "@/api/ws";
@@ -93,16 +96,18 @@ const allSettingsViews = [
 ] as const;
 type SettingsType = (typeof allSettingsViews)[number];
 
-const MqttSettingsPage = createSingleSectionPage({
+const MqttSettingsPage = (props: SettingsPageProps) => (
-  sectionKey: "mqtt",
+  <SingleSectionPage sectionKey="mqtt" level="global" {...props} />
-  level: "global",
+);
-});
 
-const CameraMqttSettingsPage = createSingleSectionPage({
+const CameraMqttSettingsPage = (props: SettingsPageProps) => (
-  sectionKey: "mqtt",
+  <SingleSectionPage
-  level: "camera",
+    sectionKey="mqtt"
-  showOverrideIndicator: false,
+    level="camera"
-});
+    showOverrideIndicator={false}
+    {...props}
+  />
+);
 
 const settingsGroups = [
   {

web/src/views/settings/SingleSectionPage.tsx

@@ -18,17 +18,18 @@ export type SingleSectionPageOptions = {
   showOverrideIndicator?: boolean;
 };
 
-export function createSingleSectionPage({
+export type SingleSectionPageProps = SettingsPageProps &
+  SingleSectionPageOptions;
+
+export function SingleSectionPage({
   sectionKey,
   level,
   sectionConfig,
   requiresRestart,
   showOverrideIndicator = true,
-}: SingleSectionPageOptions) {
-  return function SingleSectionPage({
   selectedCamera,
   setUnsavedChanges,
-  }: SettingsPageProps) {
+}: SingleSectionPageProps) {
   const sectionNamespace =
     level === "camera" ? "config/cameras" : "config/global";
   const { t, i18n } = useTranslation([
@@ -71,5 +72,4 @@ export function createSingleSectionPage({
       />
     </div>
   );
-  };
 }