Help Needed to Optimize Next.js 14 Custom Hook 🪝 Using wagmi

[spmoe]

Hello Web3 Guys,

I am using Next.js 14 with TypeScript and the wagmi package. I have created a custom hook for the readContract function.

I would appreciate it if someone could review my code and provide feedback on optimizing it.

Here is my code:

"use client";
import { useState, useEffect, useMemo, useCallback } from "react";
import { useChainId, useConfig, useReadContracts, useClient } from "wagmi";
import { readContract } from "@wagmi/core";
import SmartContractAbi from "@/abis/SmartContract.json";
import { contractAddresses } from "@/lib/addresses";
import { Address } from "viem";

interface TokenData {
  erc20BaseToken: Address;
  erc20Token: Address;
  erc721Token: Address;
  minDepositAmount: number;
  entity: string;
  exchangeRate: number;
}

const useTokens = () => {
  const [tokenData, setTokenData] = useState<TokenData | undefined>();
  const [isLoading, setIsLoading] = useState(false);
  const config = useConfig();
  const chainId = useChainId();
  const client = useClient();

  const tokenMinterAddress = useMemo(
    () => contractAddresses.SmartContract as Address,
    []
  );
  const abi = useMemo(() => SmartContractAbi.abi, []);

  const { data: rateData, isLoading: rateLoading } = useReadContracts({
    contracts: [
      {
        address: tokenMinterAddress,
        abi,
        functionName: "getExchangeRate",
        args: [0],
      },
    ],
  });

  const rate = useMemo(() => {
    if (!rateData || rateData[0]?.status !== "success") {
      return 1;
    }
    return 10 ** 18 / Number(rateData[0].result);
  }, [rateData]);

  const getTokenData = useCallback(
    async (tokenPairId: number = 0): Promise<TokenData | undefined> => {
      try {
        setIsLoading(true);
        const detailData: any = await readContract(config, {
          address: tokenMinterAddress,
          abi,
          chainId,
          functionName: "tokens",
          args: [tokenPairId],
        });

        if (detailData) {
          const data: TokenData = {
            erc20BaseToken: detailData[0],
            erc20Token: detailData[1],
            erc721Token: detailData[2],
            minDepositAmount: Number(detailData[3]) / 10 ** 18,
            entity: detailData[4],
            exchangeRate: rate,
          };
          setTokenData(data);
          return data;
        }
      } catch (error) {
        console.error("Error fetching token data:", error);
        return undefined;
      } finally {
        setIsLoading(false);
      }
    },
    [config, tokenMinterAddress, abi, chainId, rate]
  );

  useEffect(() => {
    if (client) {
      getTokenData();
    }
  }, [client, getTokenData]);

  return { isLoading: isLoading || rateLoading, tokenData, getTokenData };
};

export default useTokens;

Thanks in advance for your help!

Best regards,
James