useFormStatus — prop-drilling 없는 pending

Submit 버튼이 form 제출 중인지 알아야. 부모에서 isPending 통과는 동작하지만 noise. useFormStatus 가 둘러싼 form 에서 직접 읽음.

모양

const { pending, data, method, action } = useFormStatus(). <form action={fn}> 안 에 렌더된 컴포넌트에서 hook 이 form 의 현재 제출 state 리포트. 가장 많이 쓰는 필드가 pending.

경계 규칙

useFormStatus 가 가장 가까운 둘러싼 form 읽음. 그 form 의 descendant 로 렌더된 컴포넌트에서만 동작. Sibling 이나 parent 에서 호출하면 기본값 (pending: false) 반환.

Composition 승리

useFormStatus 전엔 커스텀 <SubmitButton> 이 prop 필요: <SubmitButton isPending={isPending}>. useFormStatus 로 버튼이 status 자체 읽음. 부모가 <SubmitButton /> 렌더, 버튼이 어떤 form 안에 land 하든 동기 유지.

`data` 필드

Submit 이 in-flight 인 동안 data 가 제출된 FormData 포함. 제출 중인 것의 optimistic 프리뷰 보여주는 데 사용 가능 ('Saving title: My New Title...'). 자연스럽게 useOptimistic 와 짝 (다음 lesson).

Pending UI 를 pending 인 것과 co-locate. Submit 버튼이 자기 pending state 알고; input 이 자기 disabled state 앎. 중앙 isPending state 없음, prop-drilling 없음. 각 조각이 form context 에서 직접 읽음.

Code

자기 status 읽는 재사용 가능한 SubmitButton·tsx

import { useFormStatus } from "react-dom";

export function SubmitButton({ children, className = "" }: { children: React.ReactNode; className?: string }) {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className={`px-4 py-2 bg-brand text-bg rounded disabled:opacity-50 ${className}`}
    >
      {pending ? "Saving…" : children}
    </button>
  );
}

// 어떤 form 안에서든 사용 — prop 필요 없음.
// <form action={saveDraft}><input name="title" /><SubmitButton>Save</SubmitButton></form>

제출된 데이터의 optimistic 프리뷰·tsx

import { useFormStatus } from "react-dom";

function PendingPreview() {
  const { pending, data } = useFormStatus();
  if (!pending || !data) return null;
  const title = data.get("title") as string;
  return (
    <p className="text-muted text-sm italic">
      Saving title: {title}…
    </p>
  );
}

// <PendingPreview /> 를 form 안 어디든 두면 — submit 이 in-flight 인
// 동안만 켜지고 제출된 거 보여줌.

Exercise

Lesson 2 의 subscribe-form 을 useFormStatus 통해 자기 pending state 읽는 <SubmitButton> 쓰게 리팩토링. 통과시키던 disabled={isPending} prop 제거. Submit 중 버튼 여전히 disable 되는지 확인. 그 다음 (useFormStatus 의 data 필드로) 제출 중인 이메일 보여주는 <PendingPreview> 추가 + in-flight 제출 중에만 켜지는지 확인.

Hint

SubmitButton import 를 자기 컴포넌트 파일 (components/SubmitButton.tsx) 로 이동 — 승리는 이제 prop 없이 앱의 모든 form 에 재사용 가능.

useFormStatus — prop-drilling 없는 pending

모양

경계 규칙

Composition 승리

`data` 필드

Code

External links

Exercise

Progress

댓글 0

모양

경계 규칙

Composition 승리

data 필드

Code

External links

Exercise

Progress

`data` 필드