diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index 1adb7e1..e0f7acf 100644 --- a/src/app/settings/page.tsx +++ b/src/app/settings/page.tsx @@ -20,18 +20,19 @@ function ItemTypeManager() { const [newLabel, setNewLabel] = useState(""); const [loading, setLoading] = useState(false); - useEffect(() => { - const loadItemTypes = async () => { - try { - const res = await getItemTypes(); - setItemTypes(res); - } catch { - // Silently ignore errors - } - }; - loadItemTypes(); + const loadItemTypes = React.useCallback(async () => { + try { + const res = await getItemTypes(); + setItemTypes(res); + } catch { + // Silently ignore errors + } }, []); + useEffect(() => { + loadItemTypes(); + }, [loadItemTypes]); + const handleAdd = async (e: React.FormEvent) => { e.preventDefault(); if (!newValue || !newLabel) return; @@ -139,20 +140,25 @@ export default function SettingsPage() { const [importFile, setImportFile] = useState(null); const [clearBeforeImport, setClearBeforeImport] = useState(false); - useEffect(() => { - const fetchData = async () => { - try { - const brands = await getBrands(); - setBrandsList(brands); - } catch { } - try { - const keys = await getApiKeys(); - setApiKeys(keys); - } catch { } - }; - fetchData(); + const loadBrands = React.useCallback(async () => { + try { + const res = await getBrands(); + setBrandsList(res); + } catch { } }, []); + const loadApiKeys = React.useCallback(async () => { + try { + const res = await getApiKeys(); + setApiKeys(res); + } catch { } + }, []); + + useEffect(() => { + loadBrands(); + loadApiKeys(); + }, [loadBrands, loadApiKeys]); + // ... inside component // Template State @@ -163,16 +169,16 @@ export default function SettingsPage() { const [tempBrand, setTempBrand] = useState(""); const [tempSpecs, setTempSpecs] = useState<{ key: string, value: string }[]>([{ key: "", value: "" }]); - const loadTemplates = async () => { + const loadTemplates = useCallback(async () => { // Wrapped with useCallback try { const res = await getTemplates(); setTemplates(res); } catch { } - }; + }, []); useEffect(() => { loadTemplates(); - }, []); + }, [loadTemplates]); // Added loadTemplates to dependency array const handleAddSpecRow = () => { setTempSpecs([...tempSpecs, { key: "", value: "" }]);