Snippet to use custom hook inspired by react-query "useQuery"

useQuery.ts

import { useEffect, useState, useCallback } from 'react';
import { ApiSuccessfulResponse } from 'types/api';

export default function useQuery<T>(
  query: (params: string) => Promise<ApiSuccessfulResponse<T>>,
  params: string
) {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState<T>();
  const [error, setError] = useState();

  const request = useCallback(
    async function request() {
      try {
        setLoading(true);
        const response = await query(params);
        setData(response.data);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
        console.error(error);
      }
    },
    [query, params]
  );

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

  return { isLoading, data, error, refetch: request };
}