cep-promise-hook.ts

import {useEffect, useState} from "react";

interface CEP {
  cep: string,
  state: string,
  city: string,
  street: string,
  neighborhood: string
}

type CepPromiseClient = (cep: string | number) => Promise<CEP>

export function useCepPromise(client: CepPromiseClient, postalCode: string | undefined | null) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<CEP | undefined>();
  const [error, setError] = useState<Error | undefined>();

  useEffect(() => {
    const value = postalCode?.replace(/\D/g, '');

    if (value && value.length === 8) {
      setLoading(true);
      client(value)
        .then(data => setData(data))
        .catch(error => setError(error))
        .finally(() => setLoading(false));
    }
  }, [postalCode]);

  return {loading, data, error};
}

Example usage:

const {data: postalCodeData, loading: postalCodeLoading} = useCepPromise(cep, input.postalCode);

useEffect(() => {
  if (postalCodeData) {
    setInput({
      ...input,
      streetName: postalCodeData.street,
      city: postalCodeData.city,
      state: postalCodeData.state,
    });
  }
}, [postalCodeData])

<input disabled={postalCodeLoading} />