【React】React 19で追加されたuseフック ( use hook)の特徴と基本的な使い方

React

React V19で追加された新機能useフック ( use hook)の特徴と基本的な使い方を紹介します。

React 19で追加されたuseフック ( use hook)の特徴

useフックの特徴は主に以下の3点です。

非同期データの読み取りを簡略化

非同期関数（Promise）の結果を自動的に解決し、Reactの状態として利用できます。

Server Componentsとの親和性が高い

サーバーで非同期処理を行い、その結果を直接クライアントに渡す処理がスムーズになります。

Suspenseと併用

useフックを使う場合、データの読み込み中にSuspenseを使ってローディング状態を表示できます。

useフック ( use hook)の基本的な使い方

1. 非同期データの取得

import React from 'react';
import { createRoot } from 'react-dom/client';

async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await response.json();
  return data;
}

function App() {
  const data = use(fetchData());

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render();

use(fetchData()) は fetchData() のPromiseを解決し、その結果をdataに代入します。
データが取得されるまで、Reactはこのコンポーネントを「一時停止」し、Suspenseを通じてローディングUIを表示できます。

useフックをSuspenseと組み合わせた例

Suspenseを使うことで、非同期データの読み込み中にローディング状態を表示できます。

import React, { Suspense } from 'react';
import { createRoot } from 'react-dom/client';

async function fetchUser() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await response.json();
  return user;
}

function UserProfile() {
  const user = use(fetchUser());
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserProfile />
    </Suspense>
  );
}

const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(<App />);

Suspenseのfallbackプロパティにローディング中に表示するUI（例：<div>Loading…</div>）を指定します。
useフックが非同期データを解決する間、Suspenseが処理を引き継ぎます。

useフックの制約

useフックはサーバーでのみ動作

現時点でのReactの設計上、useはサーバー側（Server Components）での使用を前提としています。クライアントコンポーネントでは使用できません。

Suspenseが必須

非同期処理中の状態を管理するために、必ずSuspenseを使う必要があります。

実験的機能である点

useフックは現在も実験的で、仕様変更の可能性があります。安定版がリリースされるまで注意が必要です。

useフックの利点

  • 非同期処理をReactコンポーネント内で自然に扱えるため、コードがシンプルになる。
  • Suspenseとの連携で、非同期処理に伴うローディング状態を一元管理できる。
  • サーバーサイドレンダリング（SSR）やServer Componentsを活用するアプリケーションで強力なパターンを提供。

もしアプリケーションが主にクライアントサイドで動作し、useフックを使えない場合、従来通りuseEffectやuseStateを活用して非同期データを管理する方法が適切です。
ただし、サーバーサイドレンダリングやServer Componentsに移行する場合は、useフックを採用することでさらに効率的な実装が可能です。

React

Posted by devsakaso