diff --git a/app/page.tsx b/app/page.tsx index db7f58a..359bcc4 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,7 +1,7 @@ 'use client'; import { useState, useEffect, useCallback, Suspense } from 'react'; -import { useSearchParams, useRouter } from 'next/navigation'; +import { useSearchParams } from 'next/navigation'; import { Search, Copy, Check, Hash, Key, AlertCircle, Loader2, Database, Link } from 'lucide-react'; interface SearchResult { @@ -48,7 +48,6 @@ function formatNumber(num: number): string { function HasherContent() { const searchParams = useSearchParams(); - const router = useRouter(); const [query, setQuery] = useState(''); const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); @@ -56,8 +55,9 @@ function HasherContent() { const [copiedField, setCopiedField] = useState(null); const [stats, setStats] = useState(null); const [copiedLink, setCopiedLink] = useState(false); + const [initialLoadDone, setInitialLoadDone] = useState(false); - const performSearch = useCallback(async (searchQuery: string) => { + const performSearch = useCallback(async (searchQuery: string, updateUrl: boolean = true) => { if (!searchQuery.trim()) return; setLoading(true); @@ -78,25 +78,30 @@ function HasherContent() { const data = await response.json(); setResult(data); - // Update URL with search query - const newUrl = new URL(window.location.href); - newUrl.searchParams.set('q', searchQuery.trim()); - router.replace(newUrl.pathname + newUrl.search, { scroll: false }); + // Update URL with search query (using history API to avoid re-triggering effects) + if (updateUrl) { + const newUrl = new URL(window.location.href); + newUrl.searchParams.set('q', searchQuery.trim()); + window.history.replaceState(null, '', newUrl.pathname + newUrl.search); + } } catch (_err) { setError('Failed to perform search. Please check your connection.'); } finally { setLoading(false); } - }, [router]); + }, []); - // Load query from URL on mount + // Load query from URL on mount (only once) useEffect(() => { + if (initialLoadDone) return; + const urlQuery = searchParams.get('q'); if (urlQuery) { setQuery(urlQuery); - performSearch(urlQuery); + performSearch(urlQuery, false); } - }, [searchParams, performSearch]); + setInitialLoadDone(true); + }, [searchParams, performSearch, initialLoadDone]); useEffect(() => { const fetchStats = async () => {