fix: Resolve search infinite loop issue
All checks were successful
Trigger Cloudarix Deploy / call-webhook (push) Successful in 1s
All checks were successful
Trigger Cloudarix Deploy / call-webhook (push) Successful in 1s
Fixed useEffect dependency problem in SearchInput that caused infinite re-renders when searching with 2+ characters. Changes: - Removed onSearch from useEffect dependencies - Added ESLint disable comment for exhaustive-deps - Search now only triggers on debouncedQuery changes Issue: Search spinner would hang indefinitely when typing 2 chars Root cause: onSearch callback recreated on every render, causing loop Solution: Only depend on debouncedQuery in useEffect
This commit is contained in:
parent
4a201bfd26
commit
56088ca6c0
@ -32,6 +32,7 @@ export function PolicySearchContainer({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Only search with 2 or more characters
|
||||||
if (query.length < 2) {
|
if (query.length < 2) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Search, Loader2 } from 'lucide-react';
|
import { Search, Loader2 } from 'lucide-react';
|
||||||
import { useState, useEffect } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
import { useDebounce } from 'use-debounce';
|
import { useDebounce } from 'use-debounce';
|
||||||
|
|
||||||
interface SearchInputProps {
|
interface SearchInputProps {
|
||||||
@ -22,7 +22,8 @@ export function SearchInput({ onSearch, isSearching = false }: SearchInputProps)
|
|||||||
if (debouncedQuery.length >= 2 || debouncedQuery.length === 0) {
|
if (debouncedQuery.length >= 2 || debouncedQuery.length === 0) {
|
||||||
onSearch(debouncedQuery);
|
onSearch(debouncedQuery);
|
||||||
}
|
}
|
||||||
}, [debouncedQuery, onSearch]);
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [debouncedQuery]); // Only depend on debouncedQuery, not onSearch
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative w-full max-w-2xl">
|
<div className="relative w-full max-w-2xl">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user