🧾 useFormStatus – Form 제출 상태를 쉽게 관리하는 Hook

useFormStatus는 Next.js App Router 환경에서 form 제출 상태(pending, submission) 를 관리하기 위한 Hook입니다.

useActionState가 서버 액션의 결과 상태를 다루는 Hook이라면, useFormStatus는 form 제출 그 자체의 상태를 다루는 Hook이라고 보면 됩니다.

1️⃣ useFormStatus란?

form 제출 상태(pending)를 추적하는 React Hook

useFormStatus는 form이 제출되는 순간부터
서버 액션이 완료될 때가지의 상태를 관리합니다.

2️⃣ 기본 사용 예제

"use client";

import { useFormStatus } from "react";

export default function MyForm() {
    const { pending } = useFormStatus();

    return (
        <form action={someAction}>
            <input name="name" />
            <button disabled={pending}>
                {pending ? "전송 중..." : "제출"}
            </button>
        </form>
    );
}

• pending: form 제출 중인지 여부

3️⃣ useActionState와의 차이

4️⃣ 언제 사용하면 좋을까?

• 버튼에 로딩 표시
• 제출 중 중복 제출 방지
• 폼이 "서버 응답을 기다리는 상태"를 UI로 표현할 때

📌 단, useFormStatus는 서버 결과를 저장하지 않음
→ 결과 상태가 필요하면 useActionState와 함께 사용

5️⃣ 참고: useActionState와 함께 쓰는 패턴

"use client";

import { useActionState, useFormStatus } from "react";
import { submitForm } from "./actions";

const initialState = { error: null, success: false };

export default function Form() {
    const [state, action, isPending] = useActionState(
        submitForm,
        initialState
    );
    const { pending } = useFormStatus();

    return (
        <form action={action}>
            <input name="name" />
            <button disabled={pending}>
                {pending ? "전송 중..." : "제출"}
            </button>

            {state.error && <p>{state.error}</p>}
            {state.success && <p>성공!</p>}
        </form>
    );
}

• useFormStatus는 form 제출의 pending 상태만 추적
• 서버 결과가 필요하면 useActionState가 필수
• 둘을 함께 사용하면 UI 로딩 + 결과 표시를 깔끔하게 처리 가능