useFormStatus

~18 min · useFormStatus, pending, submit button

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

역할

useFormStatus 가 parent form 의 submission state 읽음. Child Client Component 를

안에 두면 { pending, data, method, action } 받음.

어디서 부를 수 있는지

Form 의 child 안. Form 자체를 render 하는 같은 component 에서 부르면 아무것도 안 반환 — hook 이 parent 가 제공하는 form context 읽어.

React 19 추가

Field	의미
`pending`	Action 도는 동안 true
`data`	제출되는 `FormData`
`method`	항상 `'post'`
`action`	부르는 action 의 reference

Code

Submit button 이 form pending 읽음·tsx

'use client';
import { useFormStatus } from 'react-dom';

function SubmitButton({ label }: { label: string }) {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending} className="rounded bg-blue-600 px-3 py-1 text-white">
      {pending ? 'Saving&hellip;' : label}
    </button>
  );
}

// 사용 — 반드시 form 안
export function SaveForm({ action }: { action: (fd: FormData) => Promise<void> }) {
  return (
    <form action={action}>
      <input name="title" required />
      <SubmitButton label="Save" />
    </form>
  );
}

External links

useFormStatus

Exercise

Label 받고 pending state 위해 useFormStatus 쓰는 reusable <SubmitButton> Client Component 만들어. 다른 form 셋에 박아.

Progress

Progress is local-only — sign in to sync across devices.

← PrevioususeActionState Next →Progressive Enhancement

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.