useFormStatus
<form>の中のComponentから呼び出し、親formの状態を取得できる
useContextや、rhfのuseFormContextとイメージが近いmrsekut.icon
<form>と併用することが前提にある
そのため、react-domからexportされている
docs
code:ts
const { pending, data, method, action } = useFormStatus();
例
code:ts
export default function App() {
return (
<form action={action}>
<Submit />
</form>
);
}
function Submit() {
const status = useFormStatus(); // 親formの状態を取得
return <button disabled={status.pending}>Submit</button>
}
#wip
https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#experimental-useformstatus
Form Actions内でのみ使える
https://azukiazusa.dev/blog/nextjs-server-action/#useformstatus-をしてフォームの状態を表示する
formが送信中の時pendingが得られる
https://zenn.dev/takepepe/articles/server-action-and-use-from-state#useformstatus