Next.js 14 - useFormStatus

Next.js 14

 

✅ useFormStatus

---

export default function FormButton({ text }: FormButtonProps) {
  const { pending } = useFormStatus();
  return (
    <button
      disabled={pending}
      className="primary-btn h-10 disabled:cursor-not-allowed disabled:bg-neutral-400 disabled:text-neutral-300"
    >
      {pending ? "로딩 중..." : text}
    </button>
  );
}

 

useFormStatus는 action을 실행하는 form과 같은 곳에서 사용할 수 없다.

form의 children에서만 사용할 수 있다.

 

즉, form의 상태에 따라 변경하고자 하는 component 내부에서 사용해야 함.

 

useFormStatus()를 사용하기 위해서는 "use client"를 사용해서 client component로 바꿔야 한다.

 

useFormStatus는 자동으로 부모 form을 찾는다.(가장 가까운 부모 form을 찾음)