Remove useArgs() function

Author: davidde

src/components/content/home-page/blocks/block.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import { CubeIcon } from '@heroicons/react/24/outline';
-import { type Block } from 'alchemy-sdk';
+import type { Alchemy, Block } from 'alchemy-sdk';
 import {
   getSecsFromUnixSecs,
   getBlockAgeFromSecs,
   truncateAddress,
   useAlchemy,
 } from '@/lib/utilities';
-import { useDataState, useArgs, DataState } from '@/lib/data-state';
+import { useDataState, DataState } from '@/lib/data-state';
 import Link from 'next/link';
 import PopoverLink from '../../../common/popover-link';
 import LoadingPulse from '@/components/common/indicators/loading-pulse';
@@ -23,11 +23,11 @@ export default function Block(props: {
   network: string,
 }) {
   const alchemy = useAlchemy(props.network);
-  const blockNumber = props.latestBlockData.value ? props.latestBlockData.value - props.id : undefined;
+  const blockNumber = props.latestBlockData.value && props.latestBlockData.value - props.id;
 
-  const blockData = useDataState({
+  const blockData = useDataState<Block, [Alchemy, number?]>({
     fetcher: (alchemy, num) => alchemy.core.getBlock(num!),
-    args: useArgs(alchemy, blockNumber),
+    args: [alchemy, blockNumber],
   });
 
   return (

src/components/content/home-page/index.tsx

@@ -7,7 +7,7 @@ import Transactions from './transactions';
 import Stats from './stats';
 import NodeBanner from './node-banner';
 import { useAlchemy } from '@/lib/utilities';
-import { useDataState, useArgs } from '@/lib/data-state';
+import { useDataState } from '@/lib/data-state';
 
 
 export default function HomePage(props: {network: string}) {

src/components/content/home-page/transactions/index.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { useAlchemy } from '@/lib/utilities';
-import { useDataState, useArgs, DataState } from '@/lib/data-state';
+import { useDataState, DataState } from '@/lib/data-state';
+import type { Alchemy, BlockWithTransactions } from 'alchemy-sdk';
 import Transaction from './transaction';
 import ErrorWithRefetch from '@/components/common/indicators/error-with-refetch';
 
@@ -12,9 +13,9 @@ export default function Transactions(props: {
 }) {
   const alchemy = useAlchemy(props.network);
 
-  const blockWithTransactionsData = useDataState({
+  const blockWithTransactionsData = useDataState<BlockWithTransactions, [Alchemy, number?]>({
     fetcher: (alchemy, num) => alchemy.core.getBlockWithTransactions(num!),
-    args: useArgs(alchemy, props.latestBlockData.value),
+    args: [alchemy, props.latestBlockData.value],
   });
 
   let transactionsDisplay;

src/lib/data-state.tsx

@@ -181,15 +181,6 @@ export const DataState = {
   }
 };
 
-// Hook that memoizes the argument array to prevent a new array
-// from being created on every render:
-// (For inline use in `useDataState()` or `DataState.Init()` calls)
-export function useArgs<A extends any[]>(...args: A): A {
-  // Prevent infinite loop by NOT refetching unless the arguments actually changed:
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useMemo(() => args, args);
-}
-
 // To be used as a wrapper for fetch() inside useDataState inline fetcher definition:
 // (This allows the types to match with the DataState's, instead of returning a fetch Response type)
 export async function fetchJson<T>(...args: any[]): Promise<T> {
@@ -198,15 +189,17 @@ export async function fetchJson<T>(...args: any[]): Promise<T> {
 
   const json = await response.json();
   const result = 'result' in json ? json.result : json;
-  if (!result) throw new FetchError(`Empty json response or result, json: ${JSON.stringify(json)}`);
+  if (!result) throw new FetchError(`Empty json response or result.
+            json: ${JSON.stringify(json)}
+            URL: ${args[0]}`);
 
   return result as T;
 }
 
 export class FetchError extends Error {
   constructor(message: string) {
     super(message);
-    this.name = 'FetchWithoutJsonError';
+    this.name = 'FetchError';
   }
 }