useQuery.js

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

/**
 * @template T
 * @param {() => Promise<T>} fn
 * @param {import("react").DependencyList} deps
 */
export default function useQuery(fn, deps = []) {
  const latestFn = useRef(fn);
  const [state, setState] = useState({ status: "loading" });

  useEffect(() => {
    latestFn.current = fn;
  }, [fn]);

  useEffect(() => {
    let canceled = false;

    setState({ status: "loading" });

    latestFn
      .current()
      .then((data) => {
        if (canceled) return;

        setState({
          status: "success",
          data,
        });
      })
      .catch((error) => {
        if (canceled) return;

        setState({
          status: "error",
          error,
        });
      });

    return () => {
      canceled = true;
    };
  }, deps);

  return state;
}