diff --git a/src/pages/ManufacturerModels.tsx b/src/pages/ManufacturerModels.tsx index c83f34cf..84047a6f 100644 --- a/src/pages/ManufacturerModels.tsx +++ b/src/pages/ManufacturerModels.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useCallback } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { Header } from '@/components/layout/Header'; import { Button } from '@/components/ui/button'; @@ -20,13 +20,7 @@ export default function ManufacturerModels() { const [sortBy, setSortBy] = useState('name'); const [filterCategory, setFilterCategory] = useState('all'); - useEffect(() => { - if (manufacturerSlug) { - fetchData(); - } - }, [manufacturerSlug, sortBy, filterCategory]); - - const fetchData = async () => { + const fetchData = useCallback(async () => { try { // Fetch manufacturer const { data: manufacturerData, error: manufacturerError } = await supabase @@ -70,7 +64,13 @@ export default function ManufacturerModels() { } finally { setLoading(false); } - }; + }, [manufacturerSlug, sortBy, filterCategory]); + + useEffect(() => { + if (manufacturerSlug) { + fetchData(); + } + }, [manufacturerSlug, fetchData]); const filteredModels = models.filter(model => model.name.toLowerCase().includes(searchQuery.toLowerCase()) ||