Skip to main content
Version: 6.1

useLoading()

export default function useLoading<F extends (...args: any) => Promise<any>>(  func: F,  deps: readonly any[] = [],): [F, boolean];

Helps track loading state of imperative async functions.

import { useLoading } from '@rest-hooks/hooks';
function Button({ onClick, children, ...props }) {  const [clickHandler, loading, error] = useLoading(onClick);  return (    <button onClick={clickHandler} {...props}>      {loading ? 'Loading...' : children}    </button>  );}

Part of @rest-hooks/hooks

Todo toggle example#

import { useCallback } from 'react';import { useController } from 'rest-hooks';import { useLoading } from '@rest-hooks/hooks';
import TodoResource from 'resources/TodoResource';
interface Props {  todo: TodoResource;}
function TodoListItem({ todo }) {  const { fetch } = useController();
  const [toggleHandler, loading, error] = useLoading(    (e: ChangeEvent<HTMLInputElement>) =>      fetch(        TodoResource.partialUpdate(),        { id },        { completed: e.currentTarget.checked },      ),    [fetch],  );
  return (    <div>      <input        type="checkbox"        checked={todo.completed}        onChange={toggleHandler}      />      {loading ? <Spinner /> : null}      {error ? <Error>{error}</Error> : null}      {todo.title}    </div>  );}
Eslint configuration

Since we use the deps list, be sure to add useLoading to the 'additionalHooks' configuration of react-hooks/exhaustive-deps rule if you use it.

{  "rules": {    // ...    "react-hooks/exhaustive-deps": ["warn", {      "additionalHooks": "(useLoading)"    }]  }}