Reusable React Hooks

Reusable React Hooks utilities for common tasks

Makerkit uses various React Hooks for very common tasks, such as a simple reducer for asynchronous tasks, or for executing HTTP requests.

useRequestState

You can use this hook as a simple reducer for asynchronous tasks, like HTTP requests or asynchronous operations with Firestore.

To create the hook, you can use the following snippet:

tsx

const { state, setError, setData, setLoading } =
    useRequestState<Data>();

This hooks returns the current state state and the methods to update it. The state variable has the following interface:

tsx

type State<Data, ErrorType> =
  | {
      data: Data;
      loading: false;
      success: true;
      error: Maybe<ErrorType>;
    }
  | {
      data: undefined;
      loading: true;
      success: false;
      error: Maybe<ErrorType>;
    }
  | {
      data: undefined;
      loading: false;
      success: false;
      error: Maybe<ErrorType>;
    };

useApiRequest

You can use this hook to perform HTTP requests from your UI to your API and uses useRequestState under the hood for managing the state.

The function has the following interface:

tsx

function useApiRequest<Resp = unknown, Body = void>(
  path: string,
  method: HttpMethod = 'POST'
)

For example, if we wanted to make an API request to an endpoint, we could do the following:

tsx

function SignIn() {
  const [signIn, signInState] = useApiRequest(`/api/sign-in`);
  useEffect(() => {
    if (signInState.success) {
      window.location.href = '/dashboard';
    }
  }, [signInState]);
  if (signInState.loading) {
    return <span>Loading...</span>
  }
  return (
    <form onSubmit={() => signIn()}></form>
  );
}

Reusable React Hooks