mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-26 05:11:12 -05:00
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:
@@ -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';
|
||||||
@@ -21,13 +21,7 @@ export default function ManufacturerRides() {
|
|||||||
const [filterCategory, setFilterCategory] = useState('all');
|
const [filterCategory, setFilterCategory] = useState('all');
|
||||||
const [filterStatus, setFilterStatus] = useState('all');
|
const [filterStatus, setFilterStatus] = useState('all');
|
||||||
|
|
||||||
useEffect(() => {
|
const fetchData = useCallback(async () => {
|
||||||
if (manufacturerSlug) {
|
|
||||||
fetchData();
|
|
||||||
}
|
|
||||||
}, [manufacturerSlug, sortBy, filterCategory, filterStatus]);
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
try {
|
try {
|
||||||
// Fetch manufacturer
|
// Fetch manufacturer
|
||||||
const { data: manufacturerData, error: manufacturerError } = await supabase
|
const { data: manufacturerData, error: manufacturerError } = await supabase
|
||||||
@@ -84,7 +78,13 @@ export default function ManufacturerRides() {
|
|||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
}
|
}
|
||||||
};
|
}, [manufacturerSlug, sortBy, filterCategory, filterStatus]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (manufacturerSlug) {
|
||||||
|
fetchData();
|
||||||
|
}
|
||||||
|
}, [manufacturerSlug, fetchData]);
|
||||||
|
|
||||||
const filteredRides = rides.filter(ride =>
|
const filteredRides = rides.filter(ride =>
|
||||||
ride.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
ride.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||||
|
|||||||
Reference in New Issue
Block a user