Skip to content

Instantly share code, notes, and snippets.

@oriSomething

oriSomething/create-use-service.tsx

Last active October 4, 2025 15:01
Show Gist options
  • Save oriSomething/83e54e1ebf30f69bd83e4513eb8453bf to your computer and use it in GitHub Desktop.
Save oriSomething/83e54e1ebf30f69bd83e4513eb8453bf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. oriSomething revised this gist Oct 4, 2025. 1 changed file with 55 additions and 55 deletions.
    110 changes: 55 additions & 55 deletions create-use-service.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,58 +1,58 @@
    import { use, useEffect, useState } from "react";

    export function createUseService<T>(loader: () => Promise<T>) {
    let state: number = 0;
    let listeners = new Set<(state: number) => void>();
    let promise: Promise<T> | undefined;

    function listenToPromise(promise: Promise<T>) {
    state = 1;

    promise.then(
    () => {
    state = 2;
    listeners.forEach((cb) => cb(state));
    },
    () => {
    state = 3;
    listeners.forEach((cb) => cb(state));
    }
    );
    }

    function useService() {
    if (promise === undefined) {
    listenToPromise((promise = loader()));
    }

    return use(promise);
    }

    function useIsServiceLoaded() {
    const [localState, setLocalState] = useState(state);

    useEffect(() => {
    listeners.add(setLocalState);
    return () => listeners.delete(setLocalState);
    }, []);

    return localState === 2 || localState === 3;
    }

    function useIsServiceFailed() {
    const [localState, setLocalState] = useState(state);

    useEffect(() => {
    listeners.add(setLocalState);
    return () => listeners.delete(setLocalState);
    }, []);

    return localState === 3;
    }

    return {
    useService,
    useIsServiceLoaded,
    useIsServiceFailed,
    };
    }
    let state: number = 0;
    let listeners = new Set<(state: number) => void>();
    let promise: Promise<T> | undefined;

    function listenToPromise(promise: Promise<T>) {
    state = 1;

    promise.then(
    () => {
    state = 2;
    listeners.forEach((cb) => cb(state));
    },
    () => {
    state = 3;
    listeners.forEach((cb) => cb(state));
    }
    );
    }

    function useService() {
    if (promise === undefined) {
    listenToPromise((promise = loader()));
    }

    return use(promise);
    }

    function useIsServiceLoaded() {
    const [localState, setLocalState] = useState(state);

    useEffect(() => {
    listeners.add(setLocalState);
    return () => listeners.delete(setLocalState);
    }, []);

    return localState === 2 || localState === 3;
    }

    function useIsServiceFailed() {
    const [localState, setLocalState] = useState(state);

    useEffect(() => {
    listeners.add(setLocalState);
    return () => listeners.delete(setLocalState);
    }, []);

    return localState === 3;
    }

    return {
    useService,
    useIsServiceLoaded,
    useIsServiceFailed,
    };
    }
  2. oriSomething revised this gist Oct 4, 2025. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions create-use-service.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -25,11 +25,9 @@ export function createUseService<T>(loader: () => Promise<T>) {
    listenToPromise((promise = loader()));
    }


    return use(promise);
    }


    function useIsServiceLoaded() {
    const [localState, setLocalState] = useState(state);

  3. oriSomething created this gist Oct 4, 2025.
    60 changes: 60 additions & 0 deletions create-use-service.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    import { use, useEffect, useState } from "react";

    export function createUseService<T>(loader: () => Promise<T>) {
    let state: number = 0;
    let listeners = new Set<(state: number) => void>();
    let promise: Promise<T> | undefined;

    function listenToPromise(promise: Promise<T>) {
    state = 1;

    promise.then(
    () => {
    state = 2;
    listeners.forEach((cb) => cb(state));
    },
    () => {
    state = 3;
    listeners.forEach((cb) => cb(state));
    }
    );
    }

    function useService() {
    if (promise === undefined) {
    listenToPromise((promise = loader()));
    }


    return use(promise);
    }


    function useIsServiceLoaded() {
    const [localState, setLocalState] = useState(state);

    useEffect(() => {
    listeners.add(setLocalState);
    return () => listeners.delete(setLocalState);
    }, []);

    return localState === 2 || localState === 3;
    }

    function useIsServiceFailed() {
    const [localState, setLocalState] = useState(state);

    useEffect(() => {
    listeners.add(setLocalState);
    return () => listeners.delete(setLocalState);
    }, []);

    return localState === 3;
    }

    return {
    useService,
    useIsServiceLoaded,
    useIsServiceFailed,
    };
    }