React は、ユーザー インターフェイスを構築するための人気のある JavaScript ライブラリです。効率性が高く、再利用可能な UI コンポーネントの作成に重点を置いていることで知られています。 React の重要な機能の 1 つは、React 状態にフックする関数であるフックの導入です。これらのフックの 1 つは useTransition フックです。このフックにより、インターフェイスをブロックすることなく状態変更が行われるため、スムーズなエクスペリエンスが得られます。

useTransition フックを理解する

useTransition フックをよりよく理解するために、次の例を見てみましょう。

import {useState} from "react"

const App = () => {
  const [post, setPost] = useState(undefined)

  const fetchData = async () => {
    await fetch("https://jsonplaceholder.org/posts/1")
      .then((result) => result.json())
      .then((result) => setPost(result))
  }

  return(
    

      {post !== undefined && (
      

        
{post?.title}
        
{post?.content}
      
      )}
      
        Get post
      
    
  )
}

export default App; 

インターネットの速度の遅さ、または fetchData 関数内で実行されるタスクの重さによっては、ユーザーがボタンをクリックすると、フェッチ タスク中に UI がフリーズし、ユーザー エクスペリエンスが低下する可能性があります。また、ユーザーがアプリケーションを悪用したくない場合には、ユーザーがボタンをスパム送信する可能性もあります。また、アプリケーションは、操作が進行中であることをユーザーに表示しません。

これらの問題は useTransition フックを使用して簡単に修正でき、前のコードを次のように更新できます。

import {useState, useTransition} from "react"
import {ImSpinner2} from "react-icons/im"

const App = () => {
  const [pending, startTransition] = useTransition()
  const [post, setPost] = useState({})

  const fetchData = () => {
    startTransition( async () => {
      await fetch("https://jsonplaceholder.org/posts/1")
        .then((result) => result.json())
        .then((result) => setPost(result))
    })
  }

  return(
    

      {post !== undefined && (
      

        
{post.title}
        
{post.content}
      
      )}
      
        {pending ?  : "Get post" }
      
    
  )
}

export default App; 

呼び出された useTransition フックは 2 つの値を返します。pending のどちらの値は、タスクが実行され、startTransition 関数に緊急のタスクによって中断される可能性のあるタスクが含まれている場合に true になります。

上記の例では、startTransition 関数内の非同期アロー関数内でフェッチ リクエストをラップしました。

ボタンでは、保留にリンクされている無効な属性を含むように変更し、ボタンのラベルを変更して、タスクが保留中の場合はスピナーを表示し、タスクが保留中の場合は「投稿を取得」というラベルを表示します。タスクは保留中ではありません。

これにより、スムーズなユーザー エクスペリエンスが実現し、パフォーマンスが向上し、ユーザーの不正行為からアプリケーションを保護します。

結論

useTransition フックは、スムーズなユーザー エクスペリエンスを備えたパフォーマンスの高い React アプリケーションを構築するための革新的なツールです。これにより、動作が遅くなる可能性がある場合でも UI の応答性が維持され、UI のフリーズが防止され、全体的なユーザー エクスペリエンスが向上します。