こんにちは。CURUCURU エンジニアの兄山です。 今日は React18 における useTransition についてお話したいと思います。

---

React18 について

React18 は 2022 年 3 月 29 日にリリースされました。

React、引いてはフロント開発における大幅なアップデートのため早めにキャッチアップしないといけないと思い記事にしました。

今回は React18 で登場した ReactHooks の１つであるuseTransitionについてお話しします。

useTransition について

一言で言うと、処理の優先順位をかえる処理を行います。

何か重たい処理を行うときに優先させるべき処理を先に行ってくれるようになり、より快適な画面を作成する時に役立ちます。

useTransition 使用例

使い方は以下です。

1. useTransitionを使用する際は useTransition を react から import します。

2. startTransitionにコールバック関数を渡します。

3. 渡されたコールバック関数の処理における優先順位が下がります。

※isPending はデフォルトは true で startTransition 処理が完了すると false になります。

下のコードは、テキストで文字を打つと要素が絞り込みされて表示されるようになっています。

インプット要素に文字を入力すると、レンダリング処理が走り画面全体の更新が遅れますが、useTransitionを使うことで、インプット要素は先に表示されて、要素のレンダリングを遅らせることができます。

この章な処理順にすることで、より快適な画面処理が実装できるようになります。

import { useState, useTransition } from 'react'

export const SampleItems = () => {
  // 3000個の配列作成
  const items = new Array(3000).fill(null).map((it, i) => `${i}`);

　//useTransition呼ぶ
  const [isPending, startTransition] = useTransition();

  const [updateValue, setUpdateValue] = useState('');

  // 入力欄の優先順位を上げてupdateValueの更新処理の優先度を下げる(<span>箇所のレンダリングを後回しにする)
  const onChangeHandler = (e) => {
    startTransition(() => {
      setUpdateValue(e.target.value)
    })
  }

  return (
    <>
      <input
        type="text"
        onChange={onChangeHandler}
      />
      {isPending && <p>Pending...</p>}
      <div>
        {items.filter((it) => {
			return it.includes(updateValue);
		}).map((it, i) => (
          <span key={`${i}`}>{it}</span>
        ))}
      </div>
    </>
  )
}

いかがでしたでしょうか？ React18 は大幅な変更を伴うバージョンアップデートなのでこれからもキャッチアップしていって情報を共有できたらと思います。

以上、兄山がお届けしました。

最近使用しているコマンド

console.log('%c色を変更する', 'color: red');

コンソールログの文字色が変わり、エラーの検証時に見やすくなります。