javascriptreactjspromisereact-hooksreact-16

How can I pass a param to a promise inside usePromise React hook


I created an usePromise React Hook that should be able to resolve every kind of javascript promise and returns every result and state: data, resolving state and error. Im able to make it work passing the function without any param, but when I try to change it to allow a param, I get an infinite loop.

const usePromise = (promise: any): [any, boolean, any] => {
  const [data, setData] = useState<object | null>(null);
  const [error, setError] = useState<object | null>(null);
  const [fetching, setFetchingState] = useState<boolean>(true);

  useEffect(() => {
    setFetchingState(true);
    promise
      .then((data: object) => {
        setData(data);
      })
      .catch((error: object) => {
        setError(error);
      })
      .finally(() => {
        setFetchingState(false);
      });
  }, [promise]);

  return [data, fetching, error];
};

const apiCall = (param?: string): Promise<any> => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ response: `Response generated with your param ${param}.` });
    }, 500);
  });
};

const App = (): React.Element => {
  // How can I pass an argument to apiCall?
  const [response, fetching, error] = usePromise(apiCall(5));
  console.log("render"); // This logs infinitely
  return <div>{JSON.stringify({ response, fetching, error })}</div>;
};

You can check the working code (without params) at: https://codesandbox.io/s/react-typescript-fl13w

And the bug at (The tab gets stuck, be adviced): https://codesandbox.io/s/react-typescript-9ow82

Note: I would like to find the solution without using a usePromise single function library from NPM or similar


Solution

  • Custom hooks might be executed multiple times. You should design it that way, that everything you want to do just once (e.g. the API call) is inside a useEffect hook. That can be achieved by taking a callback that gets then called in a hook.

    Also, slightly more typesafe:

     const usePromise = <T>(task: () => Promise<T>) => {
       const [state, setState] = useState<[T?, boolean, Error?]>([null, true, null]);
    
    
       useEffect(() => {
           task()
             .then(result => setState([result, false, null])
             .catch(error => setState([null, false, error]);      
      }, []); // << omit the condition here, functions don't equal each other²
    
      return state;
    };
    
    // Then used as 
    usePromise(() => apiCall(5));
    

    ² yes, thats generally a bad practice, but as task is not supposed to change here, I think that's fine


    Upon request, here's a version that I use in some of my projects:

     export function useAPI<Q, R>(api: (query: Q) => Promise<R | never>) {
      const [state, setState] = useState<{ loading?: true, pending?: true, error?: string, errorCode?: number, result?: R }>({ pending: true });
    
      async function run(query: Q) {
        if(state.loading) return;
        setState({ loading: true });
    
        try {
            const result = await api(query);
            setState({ result });
        } catch(error) {
            if(error instanceof HTTPError) {
                console.error(`API Error: ${error.path}`, error);
                setState({ error: error.message, errorCode: error.code });
            } else {
                setState({ error: error.message, errorCode: NaN });
            }
        }
      }
    
      function reset() {
         setState({ pending: true });
      }
    
      return [state, run, reset] as const;
    
    }