2024-07-10

react19のuseTransition触ってみる

## react18のuseTransitionとの変更点

const [isPending, startTransition] = useTransition()

startTransitionに渡す関数が同期処理から非同期処理に変更。

### useTransitionを使わない場合のfetch（useStateで切り替える場合）

export const Prefectures = () => {
  const [postedData, setPostedData] = useState('')
  const [isPending, setIsPending] = useState(false)

  const onClick = async () => {
    setIsPending(true)
    const apiKey = 'uaz4eakpx2hfYN2P9Mvrp62GPOWuwOeUEWw21sao'
    const response = await fetch(
      'https://opendata.resas-portal.go.jp/api/v1/prefectures',
      {
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
          'X-API-KEY': `${apiKey}`,
        },
      }
    )
    setIsPending(false)
    const jsonResponse = await response.json()
    setPostedData(JSON.stringify(jsonResponse))
  }

  return (
    <div>
      <strong>Like: {String(isPending)}</strong>
      <button onClick={onClick} disabled={isPending}>
        送信
      </button>
      <p>APIからのデータ{isPending ? 'Loading...' : postedData}</p>
    </div>
  )
}

setIsPending(true)でisLoadingを管理

### useTransitionを使った場合のfetch

export const Prefectures = () => {
  const [isPending, startTransition] = useTransition()
  const [postedData, setPostedData] = useState('')
  
  function sleep(ms: number) {
    const startTime = performance.now()
    while (performance.now() - startTime < ms);
  }

  const onClick = async () => {
    setPostedData('')
    startTransition(async () => {
      const apiKey = 'uaz4eakpx2hfYN2P9Mvrp62GPOWuwOeUEWw21sao'
      const response = await fetch(
        'https://opendata.resas-portal.go.jp/api/v1/prefectures',
        {
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
            'X-API-KEY': `${apiKey}`,
          },
        }
      )
      sleep(3000)
      const jsonResponse = await response.json()
      setPostedData(JSON.stringify(jsonResponse))
    })
  }

  return (
    <div>
      <strong>Like: {String(isPending)}</strong>
      <button onClick={onClick} disabled={isPending}>
        送信
      </button>
      <p>APIからのデータ{isPending ? 'Loading...' : postedData}</p>
    </div>
  )
}

メモ
fetchに関してはreact-queryで良いと思いましたが、実際useStateでの切り替えを行ってるコードもあった為、比較として書いてみました。

2024-06-26

良いコードとは何かを輪読会で読んで

品質とスピードはトレードオフではなく、むしろ正の相関がある

「中・長期的には開発生産性高く開発速度も上がるよね」という話
前期から人のコードを見る時間を取るようになってすごく納得できる個所だった。

牛尾さんの本にもあった。
「理解に時間をかける」に繋がる話で、品質を上げるには「知識・経験」を増やすことを重視してコードを書く必要があるという理解に至った。

ちょうどリプレイスしている期間と重なりとても納得できる部分だった。

ディスカッション後、凝集度・結合度を意識してコードを書いていこうという考えになったが、一方、偶発的凝集は避けて「手を早く動かすこと」を重視すべきという意見もあり、結果として「コードの品質を担保する時間を取れる」という話でとても納得した。
（恐らく、初めから良いもの・綺麗なものは書けないので経験→知識→経験...のサイクルを回せという風に理解）

### まとめ
最低ライン・ベースが固まっていれば早く実装して空いた時間で理解・学習に時間をかける。

### 感想
ちょっと前に開発生産性で調べ物をしていて「ある程度ReadMeに残す・wikiに残せば良いよね」という意見があり納得したが、コードの初めに「どういうファイルか」を明記したり、開発する際のルールをベースに開発すると、可読性も上がり開発速度もあまり落とさずに済むので、フロント内で内部的な品質を上げる文化を広めていきたいと思いました。