React の新機能 - &#use&# フック

React 19 (RC バージョン - 2024 年 9 月現在) は、人気のある Web 開発ライブラリの最新リリースです。
V19 は、多くの新機能とフックをもたらす重要なマイルストーンです。この投稿では、これらのフックの 1 つである use フックについて説明します。

使用フック

このフックを使用すると、開発者は、複雑な状態管理を必要とせず、受信した Promise を一時停止することで、データのフェッチやリソースのロードなどの非同期タスクが完了するまで、UI コンポーネントのレンダリングを一時停止できます。

データの取得例

古典的なアプローチである useEffect フックを使用し、モック API (MSW を使用しています) からデータをフェッチする単純なコンポーネントがあります。
isLoading および isError フェッチ状態とともに、データを保存するためのローカル状態を管理します。

const [users, setUsers] = useState<any>(null);
const [isError, setIsError] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(true);

ページが最初に読み込まれるときに、この useEffect フックを実行してデータを取得し、保存し、さまざまな状態を更新します。

const fetchData = async () => {
  const response = await fetch('/api/users');
  return response.json();
};


useEffect(() => {
  fetchData()
    .then(setUsers)
    .catch(() => setIsError(true))
    .finally(() => setIsLoading(false));
}, []);

リクエストの処理中、またはエラーが発生した場合は、いくつかの UI が表示されます。

if (isLoading) {
  return <h2>Loading...</h2>;
}
if (isError) {
  return <h2>Error</h2>;
}

そしてついに！ユーザーリストをレンダリングします:

return ( 
  <>
    {users.map((user) => {
      return (
        <div>
          {user.lastName}, {user.firstName}
        </div>
      );
    })}
  </>
);

定型コードがたくさん!

さあ、リファクタリングしましょう!

useState フックと useEffect フックを削除しましょう。 fetchData メソッドはそのままにしておきます。
次に、新しい use フックを使用してデータをフェッチします。これは Promise を受け取り、JSON データまたはエラーを返します。

const users = use(fetchData());

このフックの仕組みは、次のようなことを行うのと似ています。

const users = await fetchData();

isLoading と isError の処理

これらの状態変化を処理するには、App コンポーネントに移動します。非同期イベントに応答するように設計された React Suspense コンポーネントを使用します。子の読み込みが完了するまで、フォールバック UI が表示されます。

サスペンスを操作する際のエラー処理には、ErrorBoundary を使用するのが一般的です。 React の getDerivedStateFromError() メソッドを実装する ErrorBoundary コンポーネントを追加します。

<ErrorBoundary fallback={<h2>Error</h2>}>
  <Suspense fallback={<h2>Loading...</h2>}>
    <UserList />
  </Suspense>
</ErrorBoundary>

いくつかの追加事項

ここではフックの通常のルールは適用されません。このフックはどこでも使用できます。

通常のフックとは異なり、use フックは if ステートメントで条件付きで使用できるため、フックをトリガーするかどうかを決定できます。たとえば、新しい API リクエストを機能フラグでラップし、テスト用に切り替える場合は、機能フラグを UserList コンポーネントに渡して use フックをラップするだけです。とても簡単です!

次に、アプリ コンポーネントを変更します。

<ErrorBoundary fallback={<h2>Error</h2>}>
  <Suspense fallback={<h2>Loading...</h2>}>
    <UserList testNewApi={true} />
  </Suspense>
</ErrorBoundary>

UserList コンポーネントを変更します:

let users = [];
if(testNewApi){
  user = use(fetchData());
}

通常のメソッドを使用する代わりに、このフックを使用して Context オブジェクトを取得することもできます。

const data = useContext(myContext);

たとえば、条件ステートメントに基づいてコンテキストを取得したい場合は、ここで use フックを使用できます。

結論

この記事では、use フックの構文の概要を説明し、使用例を示しました。これは、これらのフックとそれらを効果的に実装する方法を理解するのに役立ちます。この情報があなたの将来のプロジェクトに役立つことを願っています。

以上がReact の新機能 - &#use&# フックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。