Serg32

Всё правильно, хуки можно использовать непосредственно внутри функциональных компонентов. В данном примере хук вызывается не в самом компоненте, а внутри метода init. Чтобы исправить, можно в самом компоненте вызывать хук useForm и дальше в качестве аргументов конструктора передавать register и handleSubmit.

class LoginForm {
  public login: any; // по хорошему перенести сюда всю логику определения поля с валидацией
  public password: any; // по хорошему перенести сюда всю логику определения поля с валидацией
  public handleSubmit: any;

  constructor(form) {
    this.init(form);
  }

  init = (form) => {
    this.login = form.register("login");
    this.password = form.register("password", { required: true, minLength: 2 });
    this.handleSubmit = form.handleSubmit(this.#onSubmit);
  };

  #onSubmit = async (data: any) => {
    const api = useContext(ApiContext).authApi; // ERROR
    const userService = useContext(UserContext);
    let navigate = useNavigate();

    try {
      const usr = await api.login(data);
      console.log(usr);
      userService.User = new UserModel(usr);
      navigate("/");
    } catch (Exception) {
      alert("не подходит");
    }
  };
}

function LoginComponent() {
  const form = useForm();
  const loginForm = new LoginForm(form);

  return (
    <div className="col-md-offset-3 col-md-6">
      <form className="form-horizontal" onSubmit={loginForm.handleSubmit}>
        <h4>Use a local account to log in.</h4>
        <hr />

        <div className="form-group row">
          <label className="col-md-2 control-label" htmlFor="login">
            Login, Email or Phone
          </label>
          {
            <div className="col-md-10">
              <input className="form-control" {...loginForm.login} />
            </div>
          }
        </div>

        <div className="form-group row">
          <label className="col-md-2 control-label" htmlFor="password">
            Password
          </label>
          {
            <div className="col-md-10">
              <input className="form-control" {...loginForm.password} />
            </div>
          }
        </div>

        <div className="form-group row">
          <div className="col-md-offset-2 col-md-10">
            <button className="btn btn-primary">Log in</button>
          </div>
        </div>
      </form>
    </div>
  );
}

export default LoginComponent;