LoginPage.js

import * as React from 'react';
import { useState } from 'react';
import { useHistory } from 'react-router-dom';
import useAsyncCallback from './useAsyncCallback';

export default function LoginPage() {
  let history = useHistory();
  return (
    <article>
      {/* какой-то контент, всё что угодно на странице логина */}
      {/* предположим, при успешном логине уходим в корень приложения */}
      <LoginForm onSuccess={() => history.push('/')} />
      {/* футер, ещё больше контента страницы например */}
    </article>
  );
}

function LoginForm({ onSuccess }) {
  let [username, setUsername] = useState('');
  let [password, setPassword] = useState('');
  let [response, performSubmit] = useAsyncCallback(async (event) => {
    event.preventDefault();
    await login(username, password);
    onSuccess();
  }, [password, username]);

  return (
    <form onSubmit={performSubmit}>
      <input type="text"
        value={username}
        onChange={event => setUsername(event.target.value)}
      />
      <input type="password"
        value={password}
        onChange={event => setPassword(event.target.value)}
      />
      {response.type === 'Failure' ? (
        <p className="error">{response.error.message}</p>
      ) : null}
      <button
        type="submit"
        disabled={response.type === 'Pending'}
      >
        Log in
      </button>
    </form>
  )
}

async function login(username, password) {
  // Запрос на сервер или что угодно для логина
}

useAsyncCallback.js

// https://gist.github.com/alexeyraspopov/75f467f2f8776b5591a8d1cbc9c15258#declarative-action-callback
let idle = Object.freeze({ type: 'Idle' });
let pending = Object.freeze({ type: 'Pending' });

function useAsyncCallback(fn, deps) {
  let [response, setResponse] = useState(idle);

  let action = useCallback(
    (...args) => {
      setResponse(pending);
      return Promise.resolve(fn(...args))
        .then(result => {
          setResponse({ type: 'Success', result })
          return result;
        })
        .catch(error => {
          setResponse({ type: 'Failure', error })
          throw error;
        });
    },
    deps,
  );

  return [response, action];
}