useFetch

A simple hook for fetching data.

https://www.shaktools.com/shak-hooks

Network

API Reference

Installation

terminal

pnpm add @shak-hooks/usehooks

import.ts

import { useFetch } from "@shak-hooks/usehooks";

Source: packages/react/src/useFetch.ts

Signature

signature.ts

export function useFetch<T = any>(url: string, options: UseFetchOptions = {}): UseFetchReturn<T>

Parameters

Name	Type	Optional	Default
url	string	No	-
options	UseFetchOptions	Yes	{}

Returns

UseFetchReturn<T>

Exported Types

types.ts

1export interface UseFetchOptions extends RequestInit {

2 immediate?: boolean;

5export interface UseFetchReturn<T> {

6 data: T | null;

7 error: Error | null;

8 loading: boolean;

9 execute: () => Promise<void>;

10 abort: () => void;

11}

Implementation

use-fetch.ts

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

3export function useFetch<T = unknown>(url: string, options?: RequestInit) {

4 const [data, setData] = useState<T | null>(null);

5 const [error, setError] = useState<Error | null>(null);

6 const [loading, setLoading] = useState(true);

8 useEffect(() => {

9 const fetchData = async () => {

10 try {

11 const response = await fetch(url, options);

12 const json = await response.json();

13 setData(json);

14 } catch (err) {

15 setError(err as Error);

16 } finally {

17 setLoading(false);

18 }

19 };

21 fetchData();

22 }, [url]);

24 return { data, error, loading };

25}

Google Ads

Usage

example.tsx

1import { useFetch } from "@shak-hooks/usehooks";

3const result = useFetch("...", undefined);

4// result: UseFetchReturn<T>

5// Use values directly (React state).