Skip to content

Instantly share code, notes, and snippets.

@developit

developit/basic-useswr.ts

Last active October 20, 2025 19:07
Show Gist options
  • Save developit/7227a5b2499aae0ea27c36129e64259c to your computer and use it in GitHub Desktop.
Save developit/7227a5b2499aae0ea27c36129e64259c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. developit revised this gist Oct 20, 2025. 1 changed file with 4 additions and 6 deletions.
    10 changes: 4 additions & 6 deletions basic-useswr.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -3,11 +3,11 @@ import { useState, useEffect } from 'preact/hooks';
    const cache = new Map<string, any>();
    const inflight = new Map<string, Promise<any>>();

    type SWRResponse<T> = {
    export interface SWRResponse<T> {
    data: T | undefined;
    error: Error | null;
    loading: boolean;
    };
    }

    export function useSWR<T>(key: string | null, fetcher: (key: string) => Promise<T>): SWRResponse<T> {
    const [data, setData] = useState<T | undefined>(cache.get(key ?? ''));
    @@ -17,7 +17,7 @@ export function useSWR<T>(key: string | null, fetcher: (key: string) => Promise<
    useEffect(() => {
    if (!key) return;

    const load = async () => {
    (async () => {
    if (inflight.has(key)) {
    try {
    const result = await inflight.get(key);
    @@ -46,9 +46,7 @@ export function useSWR<T>(key: string | null, fetcher: (key: string) => Promise<
    setLoading(false);
    inflight.delete(key);
    }
    };

    load();
    })();
    }, [key]);

    return { data, error, loading };
  2. developit revised this gist Oct 20, 2025. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion basic-useswr.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@ type SWRResponse<T> = {
    loading: boolean;
    };

    function useSWR<T>(key: string | null, fetcher: (key: string) => Promise<T>): SWRResponse<T> {
    export function useSWR<T>(key: string | null, fetcher: (key: string) => Promise<T>): SWRResponse<T> {
    const [data, setData] = useState<T | undefined>(cache.get(key ?? ''));
    const [error, setError] = useState<Error | null>(null);
    const [loading, setLoading] = useState(!cache.has(key ?? ''));
  3. developit created this gist Oct 20, 2025.
    55 changes: 55 additions & 0 deletions basic-useswr.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    import { useState, useEffect } from 'preact/hooks';

    const cache = new Map<string, any>();
    const inflight = new Map<string, Promise<any>>();

    type SWRResponse<T> = {
    data: T | undefined;
    error: Error | null;
    loading: boolean;
    };

    function useSWR<T>(key: string | null, fetcher: (key: string) => Promise<T>): SWRResponse<T> {
    const [data, setData] = useState<T | undefined>(cache.get(key ?? ''));
    const [error, setError] = useState<Error | null>(null);
    const [loading, setLoading] = useState(!cache.has(key ?? ''));

    useEffect(() => {
    if (!key) return;

    const load = async () => {
    if (inflight.has(key)) {
    try {
    const result = await inflight.get(key);
    setData(result);
    setError(null);
    } catch (err) {
    setError(err as Error);
    } finally {
    setLoading(false);
    }
    return;
    }

    setLoading(true);
    const promise = fetcher(key);
    inflight.set(key, promise);

    try {
    const result = await promise;
    cache.set(key, result);
    setData(result);
    setError(null);
    } catch (err) {
    setError(err as Error);
    } finally {
    setLoading(false);
    inflight.delete(key);
    }
    };

    load();
    }, [key]);

    return { data, error, loading };
    }