Improve performance and fix potential issues in manufacturer ride pages

Refactor `fetchData` in `ManufacturerRides.tsx` to use `useCallback` for memoization, resolving `useEffect` dependency issues and preventing unnecessary re-renders.

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:00 +00:00
parent 4718db4002
commit 9a1c41c874

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 { Header } from '@/components/layout/Header';
import { Button } from '@/components/ui/button';
@@ -21,13 +21,7 @@ export default function ManufacturerRides() {
const [filterCategory, setFilterCategory] = useState('all');
const [filterStatus, setFilterStatus] = useState('all');
useEffect(() => {
if (manufacturerSlug) {
fetchData();
}
}, [manufacturerSlug, sortBy, filterCategory, filterStatus]);
const fetchData = async () => {
const fetchData = useCallback(async () => {
try {
// Fetch manufacturer
const { data: manufacturerData, error: manufacturerError } = await supabase
@@ -84,7 +78,13 @@ export default function ManufacturerRides() {
} finally {
setLoading(false);
}
};
}, [manufacturerSlug, sortBy, filterCategory, filterStatus]);
useEffect(() => {
if (manufacturerSlug) {
fetchData();
}
}, [manufacturerSlug, fetchData]);
const filteredRides = rides.filter(ride =>
ride.name.toLowerCase().includes(searchQuery.toLowerCase()) ||