API Calls

As an example, we'll use a component for recent orders, particularly for cryptocurrency transactions. To manage the data for recent orders, we utilize a mock API interface that simulates real-world data fetching from a server.

Fetching Data with useRefMounted and useEffect

useRefMounted

is a custom hook that returns a function to check if the component is still mounted, which helps avoid state updates on unmounted components.

useEffect

is used to call the getCryptoOrders function when the component mounts.

Mocking API Calls with cryptoOrdersApi

cryptoOrdersApi

is a mock class that simulates fetching data from an API.

getCryptoOrders

method in the

CryptoOrdersApi

class returns a Promise that resolves with an array of crypto orders.

Handling Data Types with TypeScript

The

CryptoOrder

type is defined in

src/models/crypto_order.ts

to strongly type the expected structure of an order.

getCryptoOrders

method in the Use this type to define the state and handle the fetched data, ensuring type safety.

Example: Fetching Recent Orders

function RecentOrders() {
  const isMountedRef = useRefMounted();
  const [cryptoOrders, setCryptoOrders] = useState<CryptoOrder[]>([]);

  const getCryptoOrders = useCallback(async () => {
    try {
      const response = await cryptoOrdersApi.getCryptoOrders();
      if (isMountedRef()) {
        setCryptoOrders(response);
      }
    } catch (err) {
      console.error(err);
    }
  }, [isMountedRef]);

  useEffect(() => {
    getCryptoOrders();
  }, [getCryptoOrders]);

  return (
    <Card>
      <RecentOrdersTable cryptoOrders={cryptoOrders} />
    </Card>
  );
}

Simulating API Responses

The

CryptoOrdersApi

class uses hardcoded data to simulate an API response. This is helpful during development before the backend API is available. Once the actual API is ready, replace the mock logic with real API calls.

Using SWR

Alternatively, you could use something like

swr

react-query

as a more simple solution.

Both

swr

and

react-query

are React Hooks libraries used for data fetching.

Example integration with SWR

import useSWR from 'swr';

function RecentOrders() {
  const cryptoOrders = useSWR<CryptoOrder[]>(
    '/api/crypto/orders',
    cryptoOrdersApi.getCryptoOrders,
    { fallbackData: [] }
  );

  return (
    <Card>
      {cryptoOrders.isLoading && <LoadingComponent />}
      {cryptoOrders.error && <ErrorComponent error={cryptoOrders.error} />}
      {cryptoOrders.data && (
        <RecentOrdersTable cryptoOrders={cryptoOrders.data} />
      )}
    </Card>
  );
}

For the

ErrorComponent

and

LoadingComponent

you could use examples from the UIFort components Alerts, Empty states or Skeleton loading.

For more information on SWR, see the SWR documentation.