副作用とデータリクエスト — useEffect

import { useState, useEffect } from 'react'

function HomePage() {
  const [message, setMessage] = useState('読み込み中...')

  // useEffect(fn, deps)：コンポーネントのレンダリング後に副作用を実行
  useEffect(() => {
    console.log('コンポーネントが DOM にマウントされました。副作用を実行できます')
    setMessage(データの読み込みが完了しました！)
  }, [])  // 空の依存配列 = 初回レンダリング後にのみ1回実行

  return <p>{message}</p>
}

// ファイルパス：public/posts.json
[
  {
    "id": 1,
"title": "React 入門完全ガイド",
"summary": "ゼロから React Hooks を学び、useState、useEffect などの核心概念を網羅。",
"content": "<h2>なぜ React を学ぶのか？</h2><p>React は現在最も人気のあるフロントエンドフレームワークの一つです...</p>",
    "category": "React",
    "date": "2024-05-10"
  },
  {
    "id": 2,
"title": "JavaScript 非同期プログラミング詳解",
"summary": "Promise、async/await、イベントループとマイクロタスクキューを一つの記事で完全に理解。",
"content": "<h2>非同期とは？</h2><p>JS はシングルスレッドです...</p>",
    "category": "JavaScript",
    "date": "2024-05-08"
  },
  {
    "id": 3,
"title": "CSS Grid レイアウト実践",
"summary": "CSS Grid で複雑なレスポンシブレイアウトを簡単に実現。",
"content": "<h2>Grid 入門</h2><p>Grid は二次元レイアウトシステムです...</p>",
    "category": "CSS",
    "date": "2024-05-05"
  }
]

// ファイルパス：src/pages/HomePage.jsx
import { useState, useEffect, useMemo } from 'react'
import BlogCard from '../components/BlogCard'
import CategoryFilter from '../components/CategoryFilter'

function HomePage() {
  const [articles, setArticles] = useState([])   // 記事データ
  const [isLoading, setIsLoading] = useState(true) // 読み込み状態
  const [error, setError] = useState(null)        // エラーメッセージ
  const [activeCategory, setActiveCategory] = useState('すべて')

  // useEffect でデータ読み込み：空の依存配列 = 初回レンダリング後にのみ1回実行
  useEffect(() => {
    let cancelled = false  // コンポーネントのアンマウント後に setState を防ぐフラグ

    async function fetchPosts() {
      setIsLoading(true)
      setError(null)
      try {
        const res = await fetch('/posts.json')
        if (!res.ok) throw new Error(`HTTP ${res.status}`)
        const data = await res.json()
        if (!cancelled) {
          setArticles(data)
        }
      } catch (err) {
        if (!cancelled) {
          setError(err.message)
        }
      } finally {
        if (!cancelled) {
          setIsLoading(false)
        }
      }
    }

    fetchPosts()

    // クリーンアップ関数：コンポーネントのアンマウント時に cancelled を true に設定
    return () => { cancelled = true }
  }, [])

  const categories = useMemo(() => {
    return ['すべて', ...new Set(articles.map(a => a.category))]
  }, [articles])

  const filteredArticles = useMemo(() => {
    if (activeCategory === 'すべて') return articles
    return articles.filter(a => a.category === activeCategory)
  }, [articles, activeCategory])

  return (
    <div>
      <h2 className="section-title">最新記事</h2>

      {/* 読み込み中 */}
      {isLoading && <p className="status-msg">読み込み中です。しばらくお待ちください...</p>}

      {/* 読み込みエラー */}
      {error && (
        <div className="status-msg error">
          <p>読み込みに失敗しました：{error}</p>
          <button onClick={() => window.location.reload()}>再試行</button>
        </div>
      )}

      {/* データ読み込み完了 */}
      {!isLoading && !error && (
        <>
          <CategoryFilter
            categories={categories}
            activeCategory={activeCategory}
            onCategoryChange={setActiveCategory}
          />
          <p className="result-info">共 {filteredArticles.length} 篇</p>
          {filteredArticles.length === 0 ? (
            <p className="empty-tip">このカテゴリには記事がありません</p>
          ) : (
            <div className="article-grid">
              {filteredArticles.map(article => (
                <BlogCard key={article.id} {...article} />
              ))}
            </div>
          )}
        </>
      )}
    </div>
  )
}

export default HomePage

useEffect(() => {
  // 副作用：イベント購読
  const handleScroll = () => console.log('スクロールしました')
  window.addEventListener('scroll', handleScroll)

  // クリーンアップ関数を返す
  return () => {
    // コンポーネントのアンマウント時にイベントリスナーを自動的に削除し、メモリリークを防止
    window.removeEventListener('scroll', handleScroll)
  }
}, [])

useEffect(() => {
  // 副作用：タイマー設定
  const timer = setInterval(() => {
    console.log('毎秒実行')
  }, 1000)

  return () => clearInterval(timer)  // タイマーをクリア
}, [])