Fix: React Hooks order in Index page
The `Index` page component was violating the Rules of Hooks by conditionally rendering hooks. This commit refactors the component to ensure hooks are called in a consistent order across renders, resolving the "Rendered more hooks than during the previous render" error. Additionally, it addresses performance concerns by optimizing data fetching and state management.
This commit is contained in:
@@ -69,6 +69,10 @@ const Index = () => {
|
|||||||
loadingStatuses
|
loadingStatuses
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Always call hooks before any conditional returns
|
||||||
|
const { regularJobs, trackedJobs } = useCategorizedJobs(jobs, searchQuery);
|
||||||
|
const { totalJobs, totalProfit, totalRevenue, calculateJobRevenue, calculateJobProfit } = useJobMetrics(regularJobs);
|
||||||
|
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-950 p-6 flex items-center justify-center">
|
<div className="min-h-screen bg-gray-950 p-6 flex items-center justify-center">
|
||||||
@@ -85,9 +89,6 @@ const Index = () => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const { regularJobs, trackedJobs } = useCategorizedJobs(jobs, searchQuery);
|
|
||||||
const { totalJobs, totalProfit, totalRevenue, calculateJobRevenue, calculateJobProfit } = useJobMetrics(regularJobs);
|
|
||||||
|
|
||||||
if (showJobForm) {
|
if (showJobForm) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-950 p-6">
|
<div className="min-h-screen bg-gray-950 p-6">
|
||||||
|
Reference in New Issue
Block a user