Improve data fetching performance and fix fast refresh issues

Refactor `fetchData` in `ManufacturerModels.tsx` using `useCallback` to prevent unnecessary re-renders and memoize the function. Add `fetchData` to the `useEffect` dependency array in `ManufacturerModels.tsx` to ensure it's correctly called. Address Fast Refresh compatibility in `useAuth.tsx` and correct `setInterval` dependency in `useModerationQueue.ts`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: fe5b902e-beda-40fc-bf87-a3c4ab300e3a
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
This commit is contained in:
pac7
2025-10-08 12:52:32 +00:00
parent 9a1c41c874
commit 3606e2ab54

View File

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