React Hook – asyc request

Think of all the React components that can end up having a useEffect that will call some API which then updates some state to not only hold the value of that but also track request progress, if only there was a way we could abstract some of this away and have dumber components…well consider the below:

import { useEffect, useState } from "react";

interface IUseRequest<T> {
  requesting: boolean;
  response?: T;
}

const useRequest = <T>(
  request: () => Promise<T>,
  dependencies: []
): IUseRequest<T> => {
  const [requesting, setRequesting] = useState<boolean>(false);
  const [response, setResponse] = useState<T>();

  useEffect(() => {
    void (async () => {
      setRequesting(true);
      try {
        const data: T = await request();
        setResponse(data);
      } catch (e) {
        // handle exception
      } finally {
        setRequesting(false);
      }
    })();
  }, [...dependencies]);

  return { requesting, response };
};

export default useRequest;

import { useEffect, useState } from "react";

interface IUseRequest<T> {

requesting: boolean;

response?: T;

}

const useRequest = <T>(

request: () => Promise<T>,

dependencies: []

): IUseRequest<T> => {

const [requesting, setRequesting] = useState<boolean>(false);

const [response, setResponse] = useState<T>();

useEffect(() => {

void (async () => {

setRequesting(true);

try {

const data: T = await request();

setResponse(data);

} catch (e) {

// handle exception

} finally {

setRequesting(false);

}

})();

}, [...dependencies]);

return { requesting, response };

};

export default useRequest;

You can now use this for all requests in components that only require the api response and the requesting status, it even uses generics so you can keep all your types derived without explicitly casting. Simply use it in any component like so:

const { requesting, response } = 
      useRequest<SomeType>(someApiCall, [someDependancy]);

1 2	const { requesting, response } = useRequest<SomeType>(someApiCall, [someDependancy]);