8 Awesome React Hooks in TypeScript

AwesomeReactHooks.tsx

// Original Article: https://thesmartcoder.dev/awesome-react-hooks/
//
// I just wrote hooks that I'm interested in.

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

function useTimeout(callback: Callback, delay: number) {
  const savedCallback = useRef<Callback>();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    function tick() {
      if (savedCallback.current) {
        savedCallback.current();
      }
    }

    const id = setTimeout(tick, delay);
    return () => clearTimeout(id);
  }, [delay]);
}

function usePrevious<T>(value: T) {
  const ref = useRef<T>();

  useEffect(() => {
    ref.current = value;
  });

  return ref.current;
}

// If you write `useFetch` by yourself,
// use `useSWR` or `useQuery`s in `@apollo/client`.