fix: Resolve search infinite loop issue
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:
Ahmed Darrazi 2025-12-07 22:59:07 +01:00
parent 4a201bfd26
commit 56088ca6c0
2 changed files with 4 additions and 2 deletions

View File

@ -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;
} }

View File

@ -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">