Add reusable debounce hook to improve search query responsiveness

[lunars97]

Short Description

This is an improved version of already merged PR #3103. Thanks to @bahaaTuffaha who noticed that the responsiveness has not been that much improved and suggested to apply debounce function directly in SearchPage.tsx (web) and SearchModal.tsx (native). I also noticed that the responsiveness has become much better.

Proposed Changes

• Removed changes made in useSearch hook in 3074: Add debounce function to query search to improve responsiveness #3103
• Created a reusable hook useDebounce in shared
• Created a shared constant for delay time in shared
• Applied hook in SearchPage.tsx and SearchModal.tsx

Side Effects

should be none

Resolved Issues

Fixes: #

---

[bahaaTuffaha]

Now I can see the difference .. nice work
I didn't test native yet...

[bahaaTuffaha]

Suggested change

	useEffect(() => {
	const appendToUrl = filterText.length !== 0 ? `?query=${filterText}` : ''
	navigate(`${pathname}/${appendToUrl}`, { replace: true })
	}, [debouncedQuery, navigate, location.pathname])
	useEffect(() => {
	const appendToUrl = debouncedQuery.length !== 0 ? `?query=${debouncedQuery}` : ''
	navigate(`${pathname}/${appendToUrl}`, { replace: true })
	}, [debouncedQuery])

[lunars97]

we need here navigate and pathname dependencies

[bahaaTuffaha]

Adding memo to SearchListItem will significantly make a difference from my observation because it will skip re-rendering when props are changed. memo

SearchListItem = React.memo(
  ({ title, contentWithoutHtml, query, path, thumbnail }: SearchListItemProps): ReactElement => {

[steffenkleinle]

Tested on web, nice idea @bahaaTuffaha and well done @lunars97!

This is closely related and might conflict with #3117 if my proposals are implemented. In fact, #3117 is actually caused imo by the duplication of state in the url search params and filter text use state.

[steffenkleinle]

🔧 I think it would be nice to use DEBOUNCED_QUERY_TIMEOUT as default, such that there is no need to import/explicitly pass this here.

Suggested change

	const debouncedQuery = useDebounce(query, DEBOUNCED_QUERY_TIMEOUT)
	const debouncedQuery = useDebounce(query)

[steffenkleinle]

🔧 I think it would be nice to set a default here. As long as it is only used here, there is no need to keep it in constants.

Suggested change

	const useDebounce = <T>(value: T, delay: number) => {
	const DEBOUNCE_TIMEOUT = 250
	const useDebounce = <T>(value: T, delay = DEBOUNCE_TIMEOUT) => {

[steffenkleinle]

🙃 Optional:

Suggested change

	const debouncedValueTimeout = setTimeout(() => {
	setDebouncedValue(value)
	}, delay)
	const debouncedValueTimeout = setTimeout(() => setDebouncedValue(value), delay)

[steffenkleinle]

Suggested change

	const debouncedQuery = useDebounce(filterText, DEBOUNCED_QUERY_TIMEOUT)
	const debouncedQuery = useDebounce(filterText)

[steffenkleinle]

❓ Is there a reason why we should not directly update the url? I think the search input and the url should always be in sync to avoid weird side effects. I think its okay that the url is updated before the search results are.

Edit: I see, problems arise due to the use of a useState for filterText. I think we should remove it and only use/update the query in the url search params directly like this by replacing L36 and L37

  const query = new URLSearchParams(useLocation().search).get('query') ?? ''
  const [filterText, setFilterText] = useState<string>(query)

with

  const [searchParams, setSearchParams] = useSearchParams()
  const query = searchParams.get('query') ?? ''

It is always desirable to avoid duplicated states, in this case the url search params are enough. Obviously, this was not introduced in your PR but I think it would be cool if you could refactor this here accordingly?
Let me know if you have any questions :)
For more information on the useSearchParams hook see https://api.reactrouter.com/v7/functions/react_router.useSearchParams.html

[steffenkleinle]

🔧 As mentioned above, I think we should directly update the url, so this should probably be reverted. With the change from above, you could then do the following here:

    setSearchParams({ query })
    const appendToUrl = query.length !== 0 ? `?query=${query}` : ''
    navigate(`${pathname}/${appendToUrl}`, { replace: true })