simicd

// DogImage.tsx
import React, { FC } from "react";
import { useFetch } from "./useFetch";

type DogImageType = { message: string; status: string };

export const DogImage: FC = () => {
  const data = useFetch<DogImageType>({
    url: "https://dog.ceo/api/breed/beagle/images/random"
  });

simicd

// useFetch.ts
import { useState, useEffect, useCallback } from "react";

interface RequestProps<T> {
  url: RequestInfo;
  init?: RequestInit;
  processData?: (data: any) => T;
}

export const useFetch = <T>({ url, init, processData }: RequestProps<T>) => {

simicd

// useFetch.ts
import { useState, useEffect, useCallback } from "react";

// ...

export const useFetch = ({ url, init, processData }: RequestProps) => {
  // ...

  // The callback hook ensures that the function is only created once
  // and hence the effect hook below doesn't start an infinite loop

simicd

// useFetch.ts
import { useState, useEffect } from "react";

interface RequestProps {
  url: RequestInfo;
  init?: RequestInit;
  processData?: (data: any) => DogImageType 
}

export type DogImageType = { message: string; status: string };

simicd

// DogImage.tsx
import React, { FC } from "react";
import { useFetch, DogImageType } from "./useFetch";

export const DogImage: FC = () => {
  const data = useFetch({
    url: "https://dog.ceo/api/breed/beagle/images/random",
    processData: (data) => data as DogImageType,
  });

simicd

// useFetch.ts
import { useState, useEffect } from "react";

// ..

export const useFetch = ({ url, init }: RequestProps) => {
  
  // ...

  // Turn objects into strings for useCallback & useEffect dependencies

simicd

// useFetch.ts

// ..

export const useFetch = ({ url, init }: RequestProps) => {
  // Response state
  // ..

  useEffect(() => {
    // ...

simicd

// DogImage.tsx
import React, { FC } from "react";
import { useFetch } from "./useFetch";

export const DogImage: FC = () => {

  const data = useFetch({ url: "https://dog.ceo/api/breed/beagle/images/random", init: {}})

  return <>{data ? <img src={data.message} alt="dog"></img> : <div>Loading</div>}</>;
};

simicd

// useFetch.ts

// ...

export const useFetch = ({ url, init }: RequestProps) => {
  // Response state
  const [data, setData] = useState<DogImageType>();

  useEffect(() => {
    // Define asynchronous function

simicd

//DogImage.tsx
import React, { FC } from "react";
import { useFetch } from "./useFetch";

export const DogImage: FC = () => {

  const data = useFetch({ url: "https://dog.ceo/api/breed/beagle/images/random"})

  return <>{data ? <img src={data.message} alt="dog"></img> : <div>Loading</div>}</>;
};