並列レンダリングによるアプリのパフォーマンスの向上

並列レンダリングはReact 18の機能で、フレームワークが複数のUIバージョンを同時に準備できるようにします。Reactで並列レンダリングを使用すると、レンダリング操作を必要に応じて中断、一時停止、中止、または再開することができます。Reactでは、緊急性の高い更新かどうかを指定することで、メインスレッドをブロックせずに、複数の状態更新を一度に処理できます。緊急性の高いユーザー操作（入力、クリック、キーの押下）が優先的に処理され、緊急性の低い更新（大規模な画面の更新、データの取得）はバックグラウンドで処理されます。並列レンダリングにより、Vegaアプリは次のことを行えます。

スムーズな再生とインタラクションの維持：UIコントロールとメディアは、負荷の大きい更新中も応答し続けます。
バックグラウンド処理の最適化：データの読み込みや計算によってインターフェイスがフリーズしません。
ナビゲーションの向上：複雑なレンダリングタスクの実行中でも、画面間の切り替えをスムーズに行えます。

Vegaアプリでの並列レンダリングの概要は、こちらのビデオをご覧ください。

フック、コンポーネント、ヘルパー関数

useTransitionとuseDeferredValueという2つのReactフックを使用すると、更新を管理したり、アプリのパフォーマンスを制御したりできます。不要な再レンダリングを防ぐため、これらのフックは、必ずコンポーネントのメモ化と組み合わせて使用してください。 Reactには、負荷の大きいコンポーネントのレンダリング中にフォールバックコンポーネントを表示するためのSuspenseコンポーネントも用意されています。lazyヘルパー関数を使用すると、負荷の大きいコンポーネントの読み込みを遅らせ、その後の更新に備えてキャッシュしておくことができます。

useTransition

useTransitionフックでは、状態更新を優先させて即座に処理するか、トランジション（優先度が低く、中断可能）として処理するかを指定できます。これにより、フィルタリング操作によってUIの更新が遅れるという、検索インターフェイスの一般的な課題が解決されます。デバウンスなどの手法を使用する代わりに、検索入力の応答性を維持しつつ、フィルタリングの優先度を低く設定できるようになりました。このフックは、次の2つの値を返します。

isPending：優先度の低い更新が保留中かどうかを表すブール値。読み込み状態を示す場合に役立ちます
startTransition：緊急性が低い状態更新をラップする関数

例：このサンプルコードでは、検索入力はsetQueryによって即座に更新されますが、フィルタリング操作はstartTransitionによって延期されます。トランジション中に読み込みインジケーターが表示され、準備ができた時点で結果が表示されます。

const SearchComponent = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleSearch = (query) => {
    setQuery(query);                    // 検索入力を更新
    startTransition(() => {
      setResults(performSearch(query); // 検索操作を延期
    });
  };

  return (
    <View>
      <TextInput
        value={query} 
        onChange={handleSearch} 
      />
      {isPending && <LoadingIndicator />}
      <SearchResults results={results} />
    </View>
  );
};

このコードが示すように、startTransitionは関数の実行を遅延させず、setResultsの更新を低優先度としてマークするだけです。Reactは、setQuery（高優先度のキュー）を最初に処理し、その後でsetResults（低優先度のキュー）を処理します。このフックを直接使用できない場合は、startTransition関数を直接使用してください。 使用するタイミング： コンポーネントの状態変数を制御できる場合（検索インターフェイス、ナビゲーション、大規模なリストの更新）。 使用を避けるべきタイミング： コンポーネントの状態を直接制御できない場合（代わりにuseDeferredValueを使用します）

useDeferredValue

useDeferredValueフックを使用すると、重要な更新が完了するまで、プロパティや外部ソースの値の更新を遅らせることができます。たとえば、コンポーネントが検索結果を受け取ったとき、検索結果のプレビューを更新するという負荷の大きい処理を延期する一方で、見出しの検索語は即座に更新できます。 使用するタイミング： 状態変数にアクセスできない場合に、負荷の大きい計算や非同期操作をトリガーするプロパティ 使用を避けるべきタイミング： 状態変数を制御するコンポーネント（代わりにuseTransitionを使用します）

Suspenseとlazy

Suspenseコンポーネントは、（使用可能になった時点で）コードまたはデータの読み込み中にフォールバックコンテンツを表示します。lazy関数は、オンデマンドでコンポーネントをインポートします（必要に応じてコードを取得）。これらは単独で使用することも、一緒に使用することもできます。 Suspenseを単独で使用してデータを取得 この例では、MediaListがジャンルデータを取得してレンダリングしている間、Suspenseは読み込みプレースホルダー（MediaSkeleton）を表示します。

import { MediaAPI, Media, MediaCard } from "./api/mediaApi.ts";

type Props = { genre: string };

export const MediaList = ({ genre }: Props) => {
  const [media, setMedia] = useState<Media[]>([]);
  useEffect(() => {
    // プロミスの解決時間が長い
    MediaAPI.getGenre(genre)
        .then(setMedia)
        .catch((e) => console.error(e));
  }, [genre]);

  if (media.length===0) return null;

  return media.map((media: Media) => (
    <MediaCard key={media.id} media={media} />
  ));
};

lazyとSuspenseを併用し、既定の読み込み状態でコードを分割 この例では、LazyLoadedScreenのレンダリング時にMassiveComponentをインポートすると同時に、SuspenseがMediaSkeletonプレースホルダーを表示します。

const MassiveComponent = lazy(() => import('./MassiveComponent'));

export const LazyLoadedScreen = () => {
  return (
    <View style={styles.container}>
      <Suspense fallback={<MediaSkeleton style={styles.skeleton} />}>
        <MassiveComponent />
      </Suspense>
    </View>
  );
};

並列レンダリングの実装

並列レンダリングを実装するには、次の手順に従います。

手順1：コンポーネントレベルのメモ化を追加

メモ化により、不要な再レンダリングと計算を防ぐことができます。コンポーネントの子では、useTransition()またはuseDeferredValue()を使用することが重要です。メモ化を行わないと、親が更新した時点で子が再レンダリングされるため、並列レンダリングのメリットが失われます。 メモ化しない場合： この例のSearchComponentは、useTransitionをレンダリングする際、メモ化がどのように影響するかを示しています。メモ化しないと、結果に変更がない場合でも、キーストロークのたびにSearchResultsが再レンダリングされます。

const SearchComponent = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleSearch = (query) => {
    setQuery(query);                    // 検索入力を更新
    startTransition(() => {
      setResults(performSearch(query)); // 検索操作を延期
    });
  };

  // キーストロークのたびにSearchResultsが再レンダリングされます
  const SearchResults = ({results}) => {
    return results.map(result =>

<Card data={result} />);
  };

  return (
    <View>
      <TextInput
        value={query}
        onChange={handleSearch}
      />
      {isPending && <LoadingIndicator />}
      <SearchResults results={results} />
    </View>
  );
};

メモ化する場合： memoを使用すると、検索が変更されたときのみSearchResultsが再レンダリングされます。

const SearchComponent = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleSearch = (query) => {
    setQuery(query);                    // 検索入力を更新
    startTransition(() => {
      setResults(performSearch(query)); // 検索操作を延期
    });
  };

  // 結果が変更されたときのみSearchResultsが再レンダリングされます
  const SearchResults = memo(({results}) => {
    return results.map(result =>

<Card data={result} />);
  });

  return (
    <View>
      <TextInput
        value={query}
        onChange={handleSearch}
      />
      {isPending && <LoadingIndicator />}
      <SearchResults results={results} />
    </View>
  );
};

手順2：優先度ベースの更新を適用

入力、クリック、スクロールなどの操作はすぐにユーザーにフィードバックする必要がありますが、データ処理やUIの更新は遅らせることができます。更新に優先順位を付けるには、useTransitionとuseDeferredValueを使用します。 更新に優先順位を付けない場合：

const SearchComponent = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = (query) => {
    setQuery(query);                    // 検索入力を更新
    setResults(performSearch(query);    // 検索中にUIをブロック
  };

  return (
    <View>
      <TextInput
        value={query} 
        onChange={handleSearch} 
      />
      <SearchResults results={results} />
    </View>
  );
};

入力更新（setQuery）のたびに負荷の大きい操作（performSearch）が即座に実行され、両方の更新が完了するまでUIがブロックされます。キーストロークのたびに検索操作の完了を待つ必要があるため、ユーザーは入力時に遅延を感じます。 更新に優先順位を付ける場合：

const SearchComponent = () => {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleSearch = (query) => {
    setQuery(query);                    // 検索入力を更新
    startTransition(() => {
      setResults(performSearch(query); // 検索操作を延期
    });
  };

  return (
    <View>
      <TextInput
        value={query} 
        onChange={handleSearch} 
      />
      {isPending && <LoadingIndicator />}
      // メモ化を忘れないこと
      <SearchResults results={results} />
    </View>
  );
};

負荷の大きい操作（performSearch）がトランジションで実行されるようになったため、入力更新（setQuery）を即座に完了できます。検索結果がバックグラウンドで更新されている間、ユーザーはスムーズに入力できます。更新が保留されているときは読み込みインジケーターが表示されます。

テストと検証

並列レンダリングの実装をテストするには、以下のツールを使用します。

React DevToolsプロファイラー

メモ化と優先順位の高い更新の実装をテストするには、React DevToolsプロファイラーを使用します。

Chromeで [React DevTools] を開きます。
[Profiler] タブを選択します。
記録ボタンをクリックします。
テストインタラクションを実行します（検索語句の入力、リストのスクロールなど）。
記録を停止します。
フレームグラフに不要な再レンダリングやトランジションマーカーがないことを確認します。

Vega App KPI Visualizer

UIの応答性をテストするときは、Vega App KPI Visualizerを使用します。 Vega App KPI Visualizerを実行するには、次のコマンドを使用します。

vega exec perf kpi-visualizer --app-name=[アプリ名] --kpi ui-fluidity --test-scenario <Appiumを使用したPythonテストシナリオ>

滑らかさスコアが99%を超えており、並列レンダリングの実装後もスムーズなUIインタラクションを維持していることを確認します。

Vegaアプリの開発

並列レンダリングによるアプリのパフォーマンスの向上

フック、コンポーネント、ヘルパー関数

useTransition

useDeferredValue

Suspenseとlazy

並列レンダリングの実装

手順1：コンポーネントレベルのメモ化を追加

手順2：優先度ベースの更新を適用

テストと検証

React DevToolsプロファイラー

Vega App KPI Visualizer

関連トピック

​フック、コンポーネント、ヘルパー関数

​useTransition

​useDeferredValue

​Suspenseとlazy

​並列レンダリングの実装

​手順1：コンポーネントレベルのメモ化を追加

​手順2：優先度ベースの更新を適用

​テストと検証

​React DevToolsプロファイラー

​Vega App KPI Visualizer

​関連トピック

フック、コンポーネント、ヘルパー関数

useTransition

useDeferredValue

Suspenseとlazy

並列レンダリングの実装

手順1：コンポーネントレベルのメモ化を追加

手順2：優先度ベースの更新を適用

テストと検証

React DevToolsプロファイラー

Vega App KPI Visualizer

関連トピック