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, useCallback } from "react";

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

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

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

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>) => {
  // Response state

simicd

import { useState, useEffect, useCallback } from "react";

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

  // Turn objects into strings for useCallback & useEffect dependencies
  const [stringifiedUrl, stringifiedInit] = [JSON.stringify(url), JSON.stringify(init)];

  // If no processing function is passed just return the data

simicd

/** 
 * Paste into Browser for smooth scrolling from top to bottom
 * @see https://css-tricks.com/smooth-scrolling-for-screencasts/
 */
const scrollElement = (element, scrollPosition, duration) => {
  
  // useful while testing to re-run it a bunch.
  // element.removeAttribute("style"); 
  
  const style = element.style;

simicd

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

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

export const DogImage: FC = () => {
  /** Fetch image on button click */
  const getImage = () => {
    const data = useFetch<DogImageType>({

simicd

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

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

export const DogImageWithButton: FC = () => {
  /** Fetch image on button click */
  const { data, fetchApi } = useFetch<DogImageType>({
    url: "https://dog.ceo/api/breed/beagle/images/random",

simicd

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

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

  // Define asynchronous function
  const fetchApi = async () => {
    // ...
  };

simicd

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>) => {
  // Response state