React のパフォーマンスを向上させる useTransition フックの使用方法

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(
    <div>
      {post !== undefined && (
      <div className="post-card">
        <h2>{post?.title}</h2>
        <image src={post?.image} />
        <p>{post?.content}</p>
      </div>
      )}
      <button onClick={fetchData}>
        Get post
      </button>
    </div>
  )
}

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(
    <div>
      {post !== undefined && (
      <div className="post-card">
        <h2>{post.title}</h2>
        <image src={post.image} />
        <p>{post.content}</p>
      </div>
      )}
      <button
        disabled={pending} 
        onClick={fetchData}>
        {pending ? <ImSpinner2 className="animate-spin" /> : "Get post" }
      </button>
    </div>
  )
}

export default App; 

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

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

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

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

結論

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

以上がReact のパフォーマンスを向上させる useTransition フックの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。