useLoading

useLoading es un Hook de React que simplifica la gestión del estado de carga de una Promise. Proporciona un estado para indicar si hay una operación asíncrona en curso y una función para gestionar el estado de carga automáticamente.

Interfaz

function useLoading(): [
  loading: boolean,
  startLoading: <T>(promise: Promise<T>) => Promise<T>,
];

Parámetros

Esta función no acepta parámetros.

Valor de retorno

• [loading: boolean, startLoading: <T>(promise: Promise<T>) => Promise<T>]
  

  Una tupla que contiene:

  • loadingboolean
    

    Representa el estado de carga actual. El valor inicial es false. Cambia a true cuando hay una tarea asíncrona en curso.

  • startLoading<T>(promise: Promise<T>) => Promise<T>
    

    Una función que ejecuta tareas asíncronas y gestiona el estado de carga. Esta función recibe una Promise como argumento y restablece automáticamente el estado isLoading a false cuando finaliza la Promise.

Ejemplo

function ConfirmButton() {
  const [loading, startLoading] = useLoading();

  const handleSubmit = useCallback(async () => {
    try {
      const result = await startLoading(postConfirmation());
      router.push(`/success?id=${result.id}`);
    } catch (error) {
      console.error('Error:', error);
    }
  }, [startLoading]);

  return (
    <button disabled={loading} onClick={handleSubmit}>
      {loading ? 'Cargando...' : 'Confirmar'}
    </button>
  );
}