React19にuseTransitionが便利になるらしい

はじめに

Reactは学習や静的個人Webサイトでしか使ったことがなく、業務経験はないのですが
そんな自分でも驚くような関数が追加されたので軽く解説していきたいと思います

useTransitionがReact19でどのように使いやすくなったか

React19ではuseTransitionが強化され、非同期アクションの管理が容易になりました。
以前は、非同期処理中の状態を手動で管理する必要がありましたが、React19ではuseTransitionを使うことで、自動的にこの状態管理が行われます

以前の実装例：useStateでの送信中状態やエラー状態

function UpdateName({}) {
    const [name, setName] = useState("");
    const [isPending, setIsPending] = useState(false); // useStateで読み込み状態を管理
    const [error, setError] = useState(null);
    
    const handleSubmit = async () => {
        setIsPending(true); // 呼び出し前は読み込み中にする
        cont error = await updateName(name);
        setIsPending(false);// 呼び出し後は読み込み中の状態を外す
        if (error) {
          setError(error)
          return;
        }
        redirect("/path");
    };

    return (
      <div>
        <input value={name} onChange={(event) => setName(event.target.value) } />
        <button onClick={handleSubmit} disabled={isPending}>
          update
        </button>
        {error && <p>{error}</p>}
      </div>
    );
}

React19でuseTransitionに置き換えることで得られる効果

useTransitionを使用すると、非同期処理の状態管理が自動化され、コードが簡潔になります
また、UIの応答性が向上し、ユーザーエクスペリエンスが改善されます

React19の実装例：useTransitionの使用

function updateName({}) {
    const [name, setName] = useState("");
    const [error, setError] = useState(null);
    const [isPending, startTransition] = useTransition(false);

    const handleSubmit = async () => {
      setTransition(async () => { // isPendingが自動でtrueになる
        const error = await updateName(name);
        if (error) {
          setError(error);
          return;
        }
        redirect("/path");
    }) // 処理終了後にisPendingがfalseになる
};

return (
    <div>
      <input value={name} onChange{(event) => setName(event.taget.value)} />
      <button onClick={handleSubmit} disabled={isPending}
        Update
      </button>
      {error && <p>{error}</p>
    </div>
  );
}

このようにボタンを押してから非同期リクエストを実行して完了するまでの間にisPendingがtrueを返すようになります
従来はisPendingのようなステートを自前で管理しなければいけなかったところ、useTransitionを使うことでReactが管理してくれるようになりました

まとめ

Transitionが便利になったことで、非同期処理の管理が簡素化され、開発者はシンプルで保守しやすいコードをかけるようになりました
状態管理が把握しやすくシンプルで良いですよね
useStateを乱用しなきゃいけなかった場面でこのアップデートはありがたいし予想以上に便利そうで驚きました
React19ではuseTransitionの強化だけでなく様々なアップデートを施しているのでその内容も随時記事にしていこうと思います

参考