Investigate useDeferedValue instead of debounce

[dcoa]

Enhancement

Context

Investigate useDeferedValue and verify if is possible to remove the debounce for the search query

• feat: [FC-0099] add filters and sorting functionality to the team table #8 (comment)
• Proposal: Add Debouncing to `useQuery` Hook Using the `take` Option TanStack/query#8423 (comment)
• https://react.dev/reference/react/useDeferredValue

[jacobo-dominguez-wgu]

After investigating the useDeferredValue hook or other alternatives to replace the usage of debouncing for the search filter, these are the conclusions I have found:

The useDeferredValue hook is for keeping the UI responsive during intensive updates by prioritizing user interactions over background computations, the deferred value takes less priority than other operations.
It is a good option to use it when we have expensive rendering that shouldn't block user input but it is not for API debouncing, simple state updates, or when we need to reduce actual function calls.
I created this example playground to demonstrate useDeferredValue does not prevent querying (or API calls) on every key typed, also you can take a look at this simple implementation on the project replacing the debouncing with the useDeferredValue hook.

And as mentioned here TanStack/query#8423 (comment), react query does not provide a debouncing feature and they are not planning to include in in the library.

If we want to get rid of the lodash.debounce dependency, an alternative we could use is to implement our own debouncing functionality and enhance it with useDeferredValue for UI smoothness, resulting in something like this:

import { useState, useDeferredValue, useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';

export const useSearch = (searchTerm: string, options = { enableUIOptimization: false, debounceTime = 300}) => {
  const processedTerm = options.enableUIOptimization 
    ? useDeferredValue(searchTerm) 
    : searchTerm;
  
  const [debouncedTerm, setDebouncedTerm] = useState('');
  
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedTerm(processedTerm);
    }, options.debounceTime);
    
    return () => clearTimeout(timer);
  }, [processedTerm]);

  return useQuery({
    queryKey: ['query', debouncedTerm],
    queryFn: () => fetchTeams(debouncedTerm),
    enabled: Boolean(debouncedTerm?.trim())
  });
};

Let me know your thoughts.