💡

usetransition vs useformstatus

に公開
Next.js
React
tech

React のファーストクラスである useTransition と useFormStatus。これらは一見すると似た関数のように思えますが、それぞれに異なる実際の使い方が存在します。本記事では、それぞれの特徴や適用場所を探りながら、実際の使い方を解説していきます。

useTransition の概要

useTransition は React の Concurrent Mode に関連した Hook で、優先順位の低い操作を「不優先ステート」として実行するために使用されます。これにより、重い処理を別のスレッドに移して実行できるため、UI のレスポンス性が向上します。

コード例

'use client';

import { useState, useTransition } from 'react';

export default function Page() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  const handleClick = () => {
    startTransition(() => {
      setCount(c => c + 1);
    });
  };

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      {isPending ? <p>Loading...</p> : <p>Count: {count}</p>}
    </div>
  );
}

要点

  • startTransition で不優先操作を実行
  • isPending でローディング状態を追跡

useFormStatus の概要

useFormStatus は Hook で、HTML フォームのステータスを操作するためのものです。これは、ユーザーがフォームを送信している間のステータスを表示したり、正しく操作されているかを確認するために使用されます。

コード例

'use client';

import { useFormStatus } from 'react-dom';

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

  return (
    <form action="/api/submit" method="POST">
      <button type="submit" disabled={pending}>
        {pending ? 'Sending...' : 'Submit'}
      </button>
    </form>
  );
}

要点

  • pending でユーザー操作を監視
  • HTML フォームに特化

違いと適用場所

ファーストクラス 主な目的 適用場所
useTransition ユーザー体験の向上 重い処理を実行しつつ、レスポンシブな UI を保持したい場面
useFormStatus フォーム操作の監視 HTML フォームの状態をフォーカスしたユースケース

おわりに

useTransition と useFormStatus は、それぞれの属性や適用場所が大きく異なるため、使うシーンを明確にしていることが重要です。この二つの Hook を正しく理解し、最適な場面で使用することで、効率的なコードを実現できます。

Discussion