[React & NextJS] useFormStatus

[React & NextJS] useFormStatus

Before you learn

🔗 Server Action

반응형

---

useFormStatus

const { pending, data, method, action } = useFormStatus();

 

useFormStatus는 마지막 form submit의 상태 정보를 제공하는 Hook입니다.

 

 

useFormStatus Hook은 form의 자식요소로 사용되어야 하며,

상위 form에 대한 정보만 반환합니다.

 

Hook을 호출하는 동일한 컴포넌트나 자식 컴포넌트에서 렌더링 한 form의 상태 정보는 반환하지 않습니다.

---

예시

form의 submit 상태를 확인하는 pending을 이용하여

Log in 버튼 활성화 유무를 설정한다.

// /login/page.jsx

"use client";

import { useFormState } from "react-dom";
import { handleSubmit } from "./actions";
import { useFormStatus } from "react-dom";

export dafault function LogIn() {
const [state, action] = useFormState(handleForm, null);
const { pending } = useFormStatus();

  return (
    <form action={action}>
      <input type='email' name='email'/>
      <input type='password' name='password'/>
      <button
        type="submit"
        disabled={pending}
        className="h-10 disabled:bg-neutral-400 disabled:text-neutral-300 disabled:cursor-not-allowed"
      >
        {pending ? "로딩 중" : "Log in"}
      </button>
    </form>
}

---

 

Reference

🔗 react-dom-hooks/useFormStatus