useEffect は使いたくないのですが、ではどうしたらいいですか

React .study vol.01@sapporo (https://hokkaido-js.connpass.com/event/388202/) での発表資料です。

Transcript

1. useEffect は使いたくないのですが、 ではどうしたらいいですか React .study vol.01@sapporo
2. お題 GitHub の公開 REST API を 使って、指定のリポジトリの 貢献者を取得し、一覧表示す る React アプリケーションを 作成します。
3. 前提・制約 • 実用レベルのアプリケーションではなく、新人教育やブログ記事向けといった、 サンプルコードとしての作成 • React 以外の外部ライブラリは使用したくない • 単一のコンポーネントで完結させたい
4. かつてはこう書いていました
5. import "./App.css" ; import { useEffect, useState } from "react" ; import type { Contributor } from "./types/Contributor" ; function App() { const [ contributors , setContributors ] = useState <Contributor []>([]); useEffect (() => { ( async () => { const response = await fetch ( " http s :// api.github. com/ repos/jsakamoto/BlazingStory/contributors" ); const data : Contributor [] = await response . json (); setContributors ( data ); })(); }, []); return ( <section > <h1>Contributors </ h1> <div className ="contributors - grid" > { contributors . map(( contributor ) => ( <a key ={ contributor .login } href ={ contributor .html_url } target ="_blank" title ={ contributor .login } rel =" no <img src ={ contributor .avatar_url } alt ={ contributor .login } width ={ 40 } height ={ 40 } loading ="lazy" /> </ a> )) } </ div > </ section > ); } export default App;
6. 初期データの fetch に useEffect は使いたくない • REST API の fetch に useEffect は使うなとみんなが言ってる • いちどレンダリングが完了し DOM 要素の構築・マウントが済んでから、 初期データの fetch を開始することになる • 初期データの fetch なのに何故空データでのレンダリング完了を待たねばならぬのか • DOM 要素の構築・更新が完了したことを通知する Hook を、コンポーネント の初期データ取得に "流用" している違和感
7. React 19 からこう書いています
8. import "./App.css" ; import { Suspense, use, useState } from "react" ; import type { Contributor } from "./types/Contributor" ; function App() { const [ contributors ] = useState ( async () => { const response = await fetch ( " http s :// api.github. com/ repos/jsakamoto/BlazingStory/contributors" ); const data : Contributor [] = await response . json (); return data ; }); return ( <section > <h1>Contributors </ h1> <div className ="contributors - grid" > <Suspense fallback ={ <p>Loading... </ p>} > <ContributorsList contributors ={ contributors } /> </ Suspense > </ div > </ section > ); } function ContributorsList ( props : { contributors : Promise <Contributor []> }) { const contributors = use ( props .contributors ); return ( <> { contributors . map(( contributor ) => ( <a key ={ contributor .login } href ={ contributor .html_url } target ="_blank" title ={ contributor .login } rel =" noope
9. use と Suspense で自然に書けるようになった • DOM の初回レンダリング完了を待つことなく、fetch を開始できる • コードの流れや意図もいい感じ • useState に渡す初期値関数で Promise を返すところは「おぉ?」と思うかも? • でもいったん理解してしまえば、妥当と感じられると思う
10. しかし限界も • 単一コンポーネントに収まらなかったのが惜しい • use フック※は Suspense 配下のコンポーネントでしか使えない • なのでコンポーネント分割は不可避 • 「これはサンプルなので...」 がどこまで許されるか? • 実用レベルのアプリケーションでは、このような素朴な実装では、レースコンディション やネットワークウォーターフォールといった課題に対処できない ※2026/04/08 当日、会場で教えていただきましたが use はフックではなくて API でした 出典: https://react.dev/reference/react/use
11. SWR を使ってみます
12. import "./App.css" ; import useSWR from " swr " ; import type { Contributor } from "./types/Contributor" ; function App() { const { data: contributors , isLoading } = useSWR ( " http s :// api.github. com/ repos/jsakamoto/BlazingStory/contributors" const response = await fetch ( url ); const data : Contributor [] = await response . json (); return data ; }); return ( <section > <h1>Contributors </ h1> <div className ="contributors - grid" > { isLoading ? ( <p>Loading... </ p> ) : ( contributors ?. map(( contributor ) => ( <a key ={ contributor .login } href ={ contributor .html_url } target ="_blank" title ={ contributor .login } rel =" n <img src ={ contributor .avatar_url } alt ={ contributor .login } width ={ 40 } height ={ 40 } loading ="lazy" /> </ a> )) ) } </ div > </ section > ); } export default App;
13. 単一コンポーネントに収まった • かつ、実用レベルのアプリケーション実装においても流用できる • 公式による "データ取得にはライブラリを使え" の推奨に従った形 • ただし、SWR という外部ライブラリに依存してしまった • サンプルコードとしての中立性が失われる • なぜ TanStack Query や React Router を採用しなかったのか、みたいなツッコミも
14. まとめ
15. 脱 useEffect には成功しましたが... • 実用レベルでは、外部ライブラリで非同期データを取得すべき、ですね? • React 18 以前でも OK • ただしどのライブラリに依存するべきか悩む必要が発生 • React 19 の use フック※を使えばかなり自然に書ける • ただし単一コンポーネントには収まらない • 実用レベルでは問題ある点を「サンプルだから...」で押し通せるか? • サンプルコードという文脈では、どちらの道を選ぶか悩ましい ※2026/04/08 当日、会場で教えていただきましたが use はフックではなくて API でした 出典: https://react.dev/reference/react/use
16. Learn, Practice, Share.