Pular para o conteúdo principal

useLoading()

Ajuda a acompanhar o estado de carregamento e de erro de funções assíncronas imperativas.

dica

useSuspense() ou useDLE() são melhores para endpoints GET/de leitura.

Uso​

import { useLoading, useController } from '@data-client/react';
import { PostResource } from './PostResource';
import PostForm from './PostForm';

export default function PostCreate() {
  const ctrl = useController();
  const navigate = useNavigate();
  const [handleSubmit, loading, error] = useLoading(
    async data => {
      const post = await ctrl.fetch(PostResource.getList.push, data);
      navigate(`/posts/${post.id}`);
    },
    [ctrl, navigate],
  );
  return (
    <PostForm onSubmit={handleSubmit} loading={loading} error={error} />
  );
}
Pré-visualização

Assim como useCallback, recebe uma lista de dependências para garantir a consistência referencial da função.

Eslint​

Configuração do Eslint

Como usamos a lista de deps, não deixe de adicionar useLoading à configuração 'additionalHooks' da regra react-hooks/exhaustive-deps, caso você a utilize.

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

Tipos​

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

Exemplos​

Paginação do Github​

Explore o exemplo github-app

Abrir no StackBlitzVer código-fonte

Mais demos

Envio do formulário de comentário do Github​

Explore o exemplo github-app

Abrir no StackBlitzVer código-fonte

Mais demos