React: useEffect とライフサイクル

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null)

  // ❌ Error：Requesting data directly within a component's function body
  fetch('/api/users/' + userId)
    .then(res => res.json())
    .then(data => setUser(data))

  return <div>{user?.name}</div>
}

import { useState, useEffect } from 'react'

function UserProfile({ userId }) {
  const [user, setUser] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  // ✅ Correct：useEffect + Empty array of dependencies
  useEffect(() => {
    fetch('/api/users/' + userId)
      .then(res => {
        if (!res.ok) throw new Error('Failed to load')
        return res.json()
      })
      .then(data => {
        setUser(data)
        setLoading(false)
      })
      .catch(err => {
        setError(err.message)
        setLoading(false)
      })
  }, [userId])  // Only at userId Re-execute when changes occur

  if (loading) return <p>Loading......</p>
  if (error) return <p>Error：{error}</p>
  return <h1>{user.name}</h1>
}

useEffect(() => {
  // Side Effect Logic（Execute after rendering is complete）
  console.log('Component rendering complete！')
  
  return () => {
    // Cleanup Function（Run before unloading or re-executing a component）
    console.log('Addressing Side Effects')
  }
}, [Dependency Array])

// Pattern 1：Empty array [] — Execute only once when mounted
useEffect(() => {
  console.log('Component Mounting')
  fetch('/api/init').then(setData)
}, [])  // Never re-execute

// Pattern 2：Dependencies [a, b] — Re-execute when dependencies change
useEffect(() => {
  console.log('userId It has changed.：', userId)
  fetch('/api/users/' + userId).then(setUser)
}, [userId])  // userId Re-execute when changes occur

// Pattern 3：No array dependencies — Executed on every render
useEffect(() => {
  console.log('Executed on every render')
})  // Note：No array！

function SearchResults({ query }) {
  const [results, setResults] = useState([])

  useEffect(() => {
    let cancelled = false

    fetch('/api/search?q=' + query)
      .then(res => res.json())
      .then(data => {
        // ✅ If the component has been uninstalled or query Has changed，Do not update status
        if (!cancelled) {
          setResults(data)
        }
      })

    // ✅ Cleanup：Uncheck
    return () => {
      cancelled = true
    }
  }, [query])

  return <div>{results.map(r => <p key={r.id}>{r.name}</p>)}</div>
}
// When users quickly switch search terms：
// 1. Search"A" → useEffect Execute
// 2. Search"AB" → Clear Function Markers cancelled=true → useEffect Re-execute
// 3. Search"A" the response came back → cancelled=true → Do not update status（Avoid flashing） 

サブタイトル："useEffect Life Cycle Demonstration"。状態：count、logs。useEffect が副作用を管理。タイマーによる更新

カウントは 2 秒ごとに自動で +1、スペースキーで +5。ログ："⏱️ Timer started"。アンマウント → "⏱️ Timer cleared"、"⌨️ Keyboard listening removed"

サブタイトル："useEffect Life Cycle Demonstration"。表示："useEffect Life Cycle Demonstration"。状態：count（setter: setCount）、logs（setter: setLogs）。useEffect が副作用を管理。タイマーベースの更新

// ============================================
// Example：Chat Room Component——One useEffect Covering the Entire Lifecycle
// ============================================

function ChatRoom({ roomId }) {
  const [messages, setMessages] = useState([])

  useEffect(() => {
    // === componentDidMount + componentDidUpdate ===
    console.log(`🟢 Connect to the chat room：${roomId}`)
    const connection = createConnection(roomId)
    connection.connect()

    connection.on('message', (msg) => {
      setMessages(prev => [...prev, msg])
    })

    // === componentWillUnmount + Clean Up Before Re-Execution ===
    return () => {
      console.log(`🔴 Leave the chat room：${roomId}`)
      connection.disconnect()
    }
  }, [roomId])  // roomId When things change：Disconnect the old connection → Join a New Chat Room

  return (
    <div>
      <h3>Chat Room：{roomId}</h3>
      {messages.map((msg, i) => <p key={i}>{msg}</p>}
    </div>
  )
}

// Usage
<ChatRoom roomId="general" />     // Connect general Chat Room
<ChatRoom roomId="random" />      // roomId Changes → Disconnect general → Connect random
// When a component is unloaded → Disconnect the current connection（Execution of the cleanup function）

マウント：console "🟢 Connected to chat room: general"。roomId の切り替え："🔴 Left: general" → "🟢 Connected: random"。アンマウント：切断。

🟢 チャットルームに接続：...
🔴 チャットルームから退出：...

function LiveSearch({ apiBase }) {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    if (!query.trim()) { setResults([]); return }
    setLoading(true)
    const controller = new AbortController()
    fetch(`${apiBase}/search?q=${encodeURIComponent(query)}`, { signal: controller.signal })
      .then(res => res.json())
      .then(data => { setResults(data); setLoading(false) })
      .catch(err => { if (err.name !== 'AbortError') setLoading(false) })
    return () => controller.abort()
  }, [query, apiBase])

  return (
    <div style={{ maxWidth: 400, margin: '0 auto' }}>
      <input value={query} onChange={e => setQuery(e.target.value)}
        placeholder="Search users..." style={{ width: '100%', padding: 8, borderRadius: 4, marginBottom: 8 }} />
      {loading && <p>Searching...</p>}
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {results.map(r => <li key={r.id} style={{ padding: 4, borderBottom: '1px solid #f0f0f0' }}>{r.name}</li>)}
      </ul>
    </div>
  )
}

useEffect が副作用を管理

表示："Searching..."。状態：query（setter: setQuery）、results（setter: setResults）、loading（setter: setLoading）。入力：Search users...。リスト：{r.name}。useEffect が副作用を管理。非同期データ取得/読み込み状態

useEffect が副作用を管理

表示："📱 Single column layout"。状態：size（setter: setSize）。useEffect が副作用を管理

ToDo リストを localStorage に保存。タスクを追加し、クリックで切り替え（取り消し線）。ページを再読み込み → タスクは保持される。Enter キーで追加。