Как организовать debounce-эффект в связке с react-query?

Question

[lexstile]

Как можно отказаться от второго state? (clientName1, setClietName1)
Что происходит - пользователь вводит фамилию и через секунду после того, как тот остановился, делаем запрос.
Компонент:

export const ClientSelectField = ({ ...props }: Props) => {
  const [clientName, setClietName] = useState('');
  const [clientName1, setClietName1] = useState('');
  const { data, isLoading } = useQuery(['task-client-list', clientName1], () => loadClientList(clientName));

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setClietName(event.target.value);

  useDebouncedEffect(() => setClietName1(clientName), [clientName], 1000);

  return (
    <SearchSelectField {...props} isLoading={isLoading} onInputChange={handleInputChange}>
      {data?.map((client) => (
        <Option key={client.id} value={client.id.toString()} renderChip={() => client.fullName}>
          {client.fullName}
        </Option>
      ))}
    </SearchSelectField>
  );
};

Вызов:

<ClientSelectField
            name="clientId"
            label="Клиент"
            placeholder="Начните вводить фамилию"
            value={filters.clientId || ''}
            onChange={handleChangeSelectField}
            data-test-id={getDataTestId(...dataTestKeys, 'client')}
          />

Answer 1

[wonderingpeanut]

Не вижу способа избавиться от второго стейта. Вижу только, как заменить второй input стейт на булевый стейт

const [shouldCallApi, setShouldCallApi] = useState(false);
useEffect(() => {
  const timerId = setTimeout(() => {
    setShouldCallApi(true);
  }, 1000);
  return () => clearTimeout(timerId);
}, [clientName]);
const { data, isLoading } = useQuery(['task-client-list', clientName1], () => loadClientList(clientName),{enabled: shouldCallApi});

Comments

[lexstile]

Вы правы, так и сделал, потому что иного решения не нашел.
Вот такая логика получилась:

const [clientName, setClientName] = useState('');
  const [loading, setLoading] = useState(false);

  const { data, isLoading } = useQuery(
    ['client-list'],
    () => {
      setLoading(false);
      return loadClientList(clientName);
    },
    {
      enabled: loading,
    }
  );

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setClientName(event.target.value);

  useDebouncedEffect(
    () => {
      if (clientName.length >= 2) {
        setLoading(true);
      }
    },
    [clientName],
    700
  );