Saltar al contenido principal

useLoading()

Ayuda a rastrear el estado de carga y de error de funciones asíncronas imperativas.

consejo

useSuspense() o useDLE() son mejores para endpoints GET/de lectura.

Uso​

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

export default function PostCreate({ navigateToPost }) {
  const ctrl = useController();
  const [handleSubmit, loading, error] = useLoading(
    async data => {
      const post = await ctrl.fetch(PostResource.getList.push, data);
      navigateToPost(post.id);
    },
    [ctrl],
  );
  return (
    <PostForm onSubmit={handleSubmit} loading={loading} error={error} />
  );
}
Resultado

Al igual que useCallback, recibe una lista de dependencias para garantizar la consistencia referencial de la función.

Eslint​

Configuración de Eslint

Como usamos la lista de dependencias, asegúrate de añadir useLoading a la configuración 'additionalHooks' de la regla react-hooks/exhaustive-deps si la usas.

{
  "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];

Ejemplos​

Paginación de Github​

Explora el ejemplo github-app

Abrir en StackBlitzVer código fuente

Más demos

Envío del formulario de comentarios de Github​

Explora el ejemplo github-app

Abrir en StackBlitzVer código fuente

Más demos