大規模な React アプリケーションでは、無駄な再レンダリングが重大な問題となり、パフォーマンスが低下し、アプリが遅く感じられることがあります。 React 18 では、自動バッチ処理により不必要な再レンダリングが削減され、パフォーマンスが最適化され、開発者は状態の更新をより効率的に管理できるようになります。このガイドでは、React 18 の自動バッチ処理の概念、それがパフォーマンスにとって重要である理由、アプリでそれを最大限に活用する方法について説明します。

はじめに: 大規模な React アプリケーションにおける無駄なレンダリングの問題

夕食の準備をしているとします。すべての料理を一度に作るのではなく、それぞれを別々に作るために何度も行ったり来たりし続けているとします。明らかに効率的ではありませんよね? React でも状態の更新が 1 つずつ処理されるときに同じことが起こり、1 つだけではなく複数のレンダリングが発生します。これは、特に大規模なアプリケーションにおいて、無駄な処理とパフォーマンスの低下につながります。

React 18 より前は、状態の更新が近接して発生すると、複数の再レンダリングが発生することがよくありました。 React 18 は、自動バッチ処理でこの問題を解決します。これは、複数の更新を 1 つのレンダリング サイクルにグループ化し、不必要な再レンダリングが減り、パフォーマンスが向上します。

React 18 の自動バッチ処理とは何ですか?

新機能の概要

自動バッチ処理は、React 18 で導入された機能で、React が同じイベントまたはエフェクト内で複数の状態更新を処理し、再レンダリングを 1 回だけトリガーできるようにします。これにより、レンダリングの数が最小限に抑えられ、アプリケーションの全体的なパフォーマンスが向上します。

React 18 より前は、バッチ処理はイベント ハンドラー内でのみ適用されていました。ただし、React 18 では、setTimeout、Promise、イベント リスナーなどの非同期関数内の all 更新までバッチ処理が拡張され、より強力で包括的なものになっています。

自動バッチ処理の例

React 18 での自動バッチ処理の仕組みの例を次に示します:

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  function handleClick() {
    setCount(count   1);
    setText('Updated');
    // Both updates are batched, and only one re-render happens
  }

  return (
    

      
{count}
      
{text}
      Update
    
  );
}

上記のコードでは、カウントとテキストの状態更新がまとめてバッチ処理され、2 回ではなく 1 回の再レンダリングがトリガーされます。これは React 18 の自動バッチ処理のおかげです。

パフォーマンスにとって重要な理由

不必要な再レンダリングをどのように減らすか

React では、状態が変化するたびに再レンダリングが発生します。イベント ハンドラーのように、複数の状態更新が次々に発生する場合、通常、React は複数のレンダリングをトリガーします。これにより、特に規模が拡大するにつれてアプリの速度が低下する可能性があります。

自動バッチ処理により、これらの状態の更新が単一のレンダー パスに結合されます。複数のフィールドを含むフォームに入力していて、入力が変更されるたびにフォーム全体が再レンダリングされる場合を想像してください。自動バッチ処理により、React はこれらすべての変更を一度に処理し、UI をよりスムーズかつ高速に感じさせます。

自動バッチ処理の一般的な使用例

イベント ハンドラーとエフェクトの状態更新の例

自動バッチ処理は、次のようなさまざまな状況で機能します:

1. イベント ハンドラー: イベント ハンドラーですでにバッチ化された更新に反応しますが、不必要なレンダリングを行わずに複数の更新を処理できるようになりました。

   function handleSubmit() {
     setFormSubmitted(true);
     setFormData({ ...formData, submittedAt: new Date() });
     // Only one re-render happens here
   }

1. エフェクトと非同期関数: React 18 では、setTimeout や Promise などの非同期コード内でバッチ処理がシームレスに機能します。

   setTimeout(() => {
     setLoading(false);
     setUser({ name: 'John' });
     // These state changes are batched, so only one re-render
   }, 1000);

これは、非同期操作であっても、React が複数の更新をグループ化して、パフォーマンスを向上させ、再レンダリングの回数を最小限に抑えることができることを意味します。

flashSync による手動バッチ処理: いつ使用すべきか、なぜ使用すべきか

flashSync とは何ですか?

特にアニメーションや重要な UI 更新を操作する場合、状態の更新をいつ行うかを手動で制御する必要がある場合があります。ここで flushSync が登場します。これにより、他の更新とバッチ処理する代わりに、React に更新を即座に処理させます。

いつflushSyncを使用するか

React によるバッチ更新を待つのではなく、状態が更新されて DOM にすぐに反映されることを確認する必要があるシナリオでは、flushSync を使用する必要があります。これは、アニメーションや瞬時の視覚的フィードバックなど、タイミングが重要な状況で必要になることがよくあります。

flushSync の仕組みは次のとおりです:

import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCount(count   1);
  });
  // The DOM is updated immediately after the state change
  console.log('Count updated:', count);
}

この例では、React は setCount 更新をすぐに処理し、DOM に変更がすぐに反映されるようにします。これは、時間に敏感なアクションに役立ちます。

結論: バッチ処理が最新アプリの React パフォーマンスの最適化にどのように役立つか

React 18 の 自動バッチ処理 は、不必要な再レンダリングを削減することでパフォーマンスを最適化し、アプリケーションをより高速かつスムーズに実行する画期的な機能です。 React は、状態の更新を 1 つのレンダリングにグループ化することで、アプリの UI がスケールしても、応答性と効率性を維持できるようにします。

ほとんどのユースケースでは、自動バッチ処理はそのまま使用しても完全に機能しますが、さらに制御が必要な場合は、flushSync を使用してリアルタイムで更新を処理できます。

これらの機能を活用することで、開発者は無駄なレンダリングを最小限に抑え、React アプリの全体的なパフォーマンスを向上させ、より良いユーザー エクスペリエンスを確保できるようになります。

自動バッチ処理を使用して React アプリを最適化する準備はできましたか? 次のプロジェクトにこの機能を実装して、アプリのパフォーマンスがどれだけ向上するかを確認してください。

この記事が気に入ったら、私の仕事をサポートすることを検討してください:

• コーヒー買ってきて
• メンターシップやキャリアに関するアドバイスの電話を予約する
• Twitter でフォローしてください
• LinkedIn でつながる