「まだ読み込み中…」を美しく解決する！Reactの「Suspense」と「副作用」のやさしい関係
こんにちは！Reactの世界へようこそ。
Reactを学び始めると、必ず一度はぶつかる壁があります。それが「データ取得のタイミング」と「読み込み中の画面（ローディング）の制御」です。
これまで私たちは、`useEffect`の中に「データ取ってきて！」「終わったらローディングを消して！」という命令を一生懸命書いてきましたよね。でも、実はもっとスマートで、Reactらしい「宣言的」な書き方があるんです。
今日は、魔法のような機能「Suspense（サスペンス）」を使って、面倒なローディング制御を劇的にシンプルにする方法を、一緒に紐解いていきましょう。
—
1. これまでの「泥臭い」管理と何が違うの？
まず、私たちが今までやってきた「よくある書き方」を思い出してみてください。
// 昔ながらの「頑張る」管理
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
fetchData().then(result => {
setData(result);
setIsLoading(false); // 終わったら消す！と自分たちで管理する
});
}, []);
if (isLoading) return
; // 常に分岐を書かなきゃいけない
return
;
これ、画面が増えるたびに何度も書くのは大変だし、うっかりミスも起きそうですよね。「読み込み中かどうか」を全部自分で管理するのは、ちょっと重労働なんです。
ここで登場するのがSuspenseです。これは、「データが準備できるまで、Reactが勝手に待っててくれる」仕組みです。
—
2. Suspenseは「レストランの呼び出しベル」
Suspenseの概念を理解するために、「お買い物」や「レストラン」に例えてみましょう。
想像してください。あなたがレストランで注文をしました。
- 昔のやり方：店員さんが「今作ってます！」「まだです！」「できました！」と逐一報告しに来る。客（画面）はそのたびに「じゃあ待機！」と反応しなければならない。
- Suspenseのやり方：注文して待っている間、あなたは「準備中」という看板が出ている席で本を読んで待つだけ。料理ができたら、自動的に食事が運ばれてくる。
ReactにおけるSuspenseは、まさにこの「準備中」の席を用意してくれる機能なんです。「データが来るまで待っててね」と宣言するだけで、あとはReactがよしなにやってくれます。
—
3. 実践！Suspenseでデータ取得を宣言的に書く
実際にコードを見てみましょう。ポイントは、`useEffect`で無理やり管理するのではなく、「データ取得そのもの」をReactに教えてあげることです。
※注：今回はわかりやすくするため、Reactの最新ライブラリ（TanStack Queryなど）が裏側でやっていることをイメージしたコード例にします。
import { Suspense } from ‘react’;
// データ取得用のコンポーネント
function UserProfile() {
// ここでデータを取得（※本来はReactがキャッシュを管理する仕組みを使います）
const user = fetchUserFromCache();
// データがまだなければ、Reactはここで自動的に「待機状態」に入り、
// 下の「読み込み中…」を表示してくれます！
return
こんにちは、{user.name}さん！
;
}
export default function App() {
return (
// 「中身が準備できるまで待っててね」と宣言するだけ！
コメント