はじめに
Reactで非同期データを扱うアプリケーションを開発していると、「レースコンディション」と呼ばれる問題に遭遇することがあります。この記事では、求人サイトのブックマーク機能で発生したレースコンディションの問題と、その解決策として実装した「二段階レンダリング」パターンについて解説します。
問題の概要
ブックマークページにアクセスすると、以下のような表示の遷移が発生していました：
- ローディング表示
- 「ブックマークした求人はありません」という表示（一瞬だけ表示される）
- 実際のブックマークした求人の表示
この「ちらつき」は、ユーザー体験を損なう問題でした。
レースコンディションとは
レースコンディションとは、複数の非同期処理が実行され、それらの完了順序が予測できない状況を指します。今回の問題では、以下の2つの非同期処理が関係していました：
- セッション情報の取得（useSession）
- ブックマーク情報の取得（useBookmarks）
これらの処理は以下のような依存関係を持っていました：
- ブックマークコンテキストは、ユーザー情報に依存している
- ユーザー情報は、セッション情報から取得される
コードで表すと、ブックマークコンテキストは以下のような実装になっていました：
useEffect(() => {
async function fetchBookmarks() {
try {
if (user) {
// ログインユーザーの場合はAPIからブックマーク情報を取得
const response = await fetch(`/api/users/${user.id}/bookmarks`);
// ...データ取得処理
} else {
// 非ログインユーザーの場合はローカルストレージから取得
// ...
}
} catch (error) {
// エラー処理
} finally {
setIsLoading(false);
}
}
fetchBookmarks();
}, [user]); // user を依存配列に指定
問題の発生メカニズム
問題が発生する流れは以下の通りでした：
1.ページ初期ロード時：
- セッション情報は "loading" 状態
- ブックマークコンテキストは初期値の空配列
[]を返す
2.セッション情報の取得完了：
-
statusが "authenticated" に変わる -
userIdが利用可能になる
3.ブックマークコンテキストの更新：
- ユーザーIDを使ってブックマーク情報をAPIから取得
-
bookmarkedJobsが実際のブックマークIDの配列に更新される
4.UI表示の問題：
- ステップ1の空配列に基づいて「ブックマークがない」と表示
- ステップ3の完了後、実際のブックマークが表示される
- この急な切り替えがちらつきとして認識される
解決策：二段階レンダリングパターン
この問題を解決するために、「二段階レンダリング」パターンを実装しました。このパターンでは、すべての必要なデータが揃うまでは初期化中の状態を維持し、完全なデータが揃った後に本来のUIをレンダリングします。
実装のポイントは以下の通りです：
1.初期化フラグの導入：
const [initialized, setInitialized] = useState(false);
2.遅延初期化の実装：
useEffect(() => {
if (status !== "loading") {
// セッション情報の取得が完了したら、少し遅延を入れて初期化完了とする
const timer = setTimeout(() => {
setInitialized(true);
}, 500);
return () => clearTimeout(timer);
}
}, [status]);
3.条件付きレンダリングの実装：
// 初期化前はローディング表示
if (!initialized) {
return (
<>
<Navbar />
<main>
<div>
<h1>{isOwner ? "マイブックマーク" : "ブックマーク一覧"}</h1>
<div className="loading-spinner">
<LoadingSpinner />
</div>
</div>
</main>
<Footer />
</>
);
}
4.データ取得の最適化：
useEffect(() => {
// 初期化が完了していない場合は何もしない
if (!initialized) return;
async function fetchJobsData() {
// データ取得処理
}
fetchJobsData();
}, [bookmarkedJobs, initialized]);
解決策の効果
この二段階レンダリングパターンを実装することで、以下の効果が得られました：
- ちらつきの解消：「ブックマークがない」という表示が一瞬だけ表示される問題が解消されました
- 一貫したユーザー体験：ユーザーは常に正確な情報を見ることができるようになりました
- 予測可能な表示：データの取得状態に関わらず、UIの表示が予測可能になりました
なぜ0.5秒の遅延が必要なのか
解決策では0.5秒の遅延を導入していますが、これには以下の理由があります：
- 非同期処理の完了を待つため：セッションの読み込みが完了しても、ブックマークコンテキストの初期化はまだ進行中かもしれません
- レンダリングサイクルの同期：Reactのレンダリングサイクルとデータ取得のタイミングを同期させるためのバッファとして機能します
- ネットワーク遅延への対応：APIからのデータ取得に時間がかかる可能性があります
この遅延は「安全マージン」として機能しており、すべての非同期処理が確実に完了する時間を確保しています。
まとめ
Reactアプリケーションでは、複数の非同期データソースに依存するコンポーネントを扱う場合、レースコンディションに注意する必要があります。二段階レンダリングパターンは、このような問題を解決するための効果的なアプローチです。
このパターンの本質は、「不完全なデータに基づく中間状態を表示しない」という考え方にあります。ユーザーには、データが完全に揃うまでローディング状態を見せ、すべての準備が整ってから実際のコンテンツを表示することで、一貫性のあるユーザー体験を提供することができます。
React開発において、非同期データの取得と表示のタイミングを適切に管理することは、高品質なアプリケーションを構築する上で非常に重要なスキルです。