検索 Hook のレースコンディション — AbortController が効かない 3 つのパターンと、ガードが要る場所

// hooks/useUserSearch.ts（出発点）
type User = { id: string; name: string; email: string }
 
export const useUserSearch = (query: string) => {
  const [users, setUsers] = useState<User[]>([])
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
 
  useEffect(() => {
    const timer = window.setTimeout(async () => {
      setIsLoading(true)
      const response = await fetch(`/api/users?q=${encodeURIComponent(query)}`)
      const data: User[] = await response.json()
      setUsers(data)
      setIsLoading(false)
    }, 300)
 
    return () => window.clearTimeout(timer)
  }, [query])
 
  return { users, isLoading, error }
}

// 1-a（バグあり）
useEffect(() => {
  const controller = new AbortController()
 
  const timer = window.setTimeout(async () => {
    setIsLoading(true)
    const response = await fetch(`/api/users?q=${encodeURIComponent(query)}`, {
      signal: controller.signal,
    })
    const data: User[] = await response.json()
    setUsers(data)
    setIsLoading(false)
  }, 300)
 
  return () => window.clearTimeout(timer)
}, [query])

return () => {
  window.clearTimeout(timer)
  controller.abort()
}

// 1-b（バグあり）
try {
  setIsLoading(true)
  const response = await fetch(url, { signal: controller.signal })
  const data: User[] = await response.json()
  setUsers(data)
} catch (e) {
  if ((e as Error).name !== 'AbortError') {
    setError('通信に失敗した')
  }
} finally {
  setIsLoading(false) // ← 中断されたリクエストでも必ず通る
}

// 2（バグあり）
if (controllerRef.current === controller) {
  setUsers(data)
}
// ...
if (!controller.signal.aborted) {
  setIsLoading(false)
}

// 2（修正）
const isLatest = () => controllerRef.current === controller
 
try {
  const response = await fetch(url, { signal: controller.signal })
  const data: User[] = await response.json()
  if (!isLatest()) return
  setUsers(data)
  setIsLoading(false)
} catch {
  if (!isLatest()) return
  setError('通信に失敗した')
  setIsLoading(false)
}

// 3（バグあり）
export const useUserSearch = (query: string) => {
  // レンダーのたびに新しい controller ができる
  const controller = new AbortController()
 
  const search = useCallback(async (keyword: string) => {
    const response = await fetch(url, { signal: controller.signal })
    // ...
  }, [])
 
  useEffect(() => {
    const timer = window.setTimeout(() => void search(query), 300)
    return () => {
      window.clearTimeout(timer)
      controller.abort() // ← 何を abort しているのか定まらない
    }
  }, [query, search])
}

const controllerRef = useRef<AbortController | null>(null)
 
const search = useCallback(async (keyword: string) => {
  controllerRef.current?.abort()      // 前の実行を止める
  const controller = new AbortController()
  controllerRef.current = controller  // 自分を最新として登録する
  // ...
}, [])

// ボディを 500ms 遅らせて返すサーバーに対して
const response = await fetch(url, { signal: controller.signal })
setTimeout(() => controller.abort(), 100) // ボディ読み取りの最中に中断する
 
try {
  const body = await response.json()
  console.log('解決', body)
} catch (e) {
  console.log('reject', e.name) // → AbortError
}

const response = await fetch(url, { signal: controller.signal })
if (controller.signal.aborted) return // ← abort されていれば fetch 自体が reject している
 
if (!response.ok) {
  setError(`検索に失敗した (${response.status})`) // ここも同様。到達時点で aborted はまず false
  return
}

// 4（バグあり）— signal を知らない await をまたぐ
const users: User[] = await response.json()
const enriched = await attachAvatars(users) // signal を渡していない
setUsers(enriched)                          // ← abort されても到達する

// 4（修正）— 出口を 1 つの関数に集約する
const commit = (next: SearchState) => {
  if (controller.signal.aborted) return
  setState(next)
}

// hooks/useUserSearch.ts
import { useCallback, useEffect, useRef, useState } from 'react'
 
export type User = { id: string; name: string; email: string }
 
type SearchState = {
  users: User[]
  isLoading: boolean
  error: string | null
}
 
const initialState: SearchState = { users: [], isLoading: false, error: null }
 
export const useUserSearch = (query: string, delayMs = 300) => {
  const [state, setState] = useState<SearchState>(initialState)
  const controllerRef = useRef<AbortController | null>(null)
 
  const search = useCallback(async (keyword: string) => {
    // 前の実行を止めてから、自分を最新として登録する
    controllerRef.current?.abort()
    const controller = new AbortController()
    controllerRef.current = controller
 
    // 中断された実行が state を触らないための唯一の出口
    const commit = (next: SearchState) => {
      if (controller.signal.aborted) return
      setState(next)
    }
 
    commit({ users: [], isLoading: true, error: null })
 
    try {
      const response = await fetch(`/api/users?q=${encodeURIComponent(keyword)}`, {
        signal: controller.signal,
      })
 
      if (!response.ok) {
        commit({ users: [], isLoading: false, error: `検索に失敗した (${response.status})` })
        return
      }
 
      const users: User[] = await response.json()
      commit({ users, isLoading: false, error: null })
    } catch {
      // abort 由来の例外は commit 側の signal チェックで落ちるので分岐は不要
      commit({ users: [], isLoading: false, error: '通信に失敗した' })
    }
  }, [])
 
  useEffect(() => {
    const keyword = query.trim()
 
    // 空文字は API を叩かず、進行中の検索も畳む
    if (keyword === '') {
      controllerRef.current?.abort()
      controllerRef.current = null
      setState(initialState)
      return
    }
 
    const timer = window.setTimeout(() => void search(keyword), delayMs)
    return () => window.clearTimeout(timer)
  }, [query, delayMs, search])
 
  useEffect(() => () => controllerRef.current?.abort(), [])
 
  return state
}

// components/UserSearch.tsx
'use client'
 
export const UserSearch = () => {
  const [query, setQuery] = useState('') // 入力欄の状態はここ
  const { users, isLoading, error } = useUserSearch(query) // 結果はその派生
 
  return (
    <div>
      <SearchInput value={query} onChange={setQuery} />
      <SearchResults query={query} users={users} isLoading={isLoading} error={error} />
    </div>
  )
}

// components/SearchResults.tsx
if (isLoading) return <Spinner />
if (error !== null) return <ErrorMessage message={error} />
if (query.trim() !== '' && users.length === 0) return <EmptyState />
return <UserList users={users} />

// hooks/useUserSearch.ts（TanStack Query 版）
import { keepPreviousData, useQuery } from '@tanstack/react-query'
 
export const useUserSearch = (keyword: string) => {
  return useQuery({
    queryKey: ['users', keyword],
    enabled: keyword !== '',
    placeholderData: keepPreviousData,
    queryFn: async ({ signal }) => {
      // signal はライブラリが渡してくる。キーが変われば自動で abort される
      const response = await fetch(`/api/users?q=${encodeURIComponent(keyword)}`, { signal })
      if (!response.ok) throw new Error(`検索に失敗した (${response.status})`)
      return (await response.json()) as User[]
    },
  })
}

// hooks/useDebouncedValue.ts
export const useDebouncedValue = <T,>(value: T, delayMs = 300): T => {
  const [debounced, setDebounced] = useState(value)
 
  useEffect(() => {
    const timer = window.setTimeout(() => setDebounced(value), delayMs)
    return () => window.clearTimeout(timer) // value が変わるたびに前の予約を捨てる
  }, [value, delayMs])
 
  return debounced
}

// 素の実装 — 入力を消した瞬間に畳む（デバウンスを経由しない）
if (keyword === '') {
  controllerRef.current?.abort()
  setState(initialState)
  return
}

export const useUserSearch = (query: string) => {
  const raw = query.trim()
  const debounced = useDebouncedValue(raw, 300)
 
  // クリアは待たせない。空文字だけデバウンスを飛ばす
  const keyword = raw === '' ? '' : debounced
 
  return useQuery({
    queryKey: ['users', keyword],
    enabled: keyword !== '',
    placeholderData: keepPreviousData,
    queryFn: async ({ signal }) => {
      /* ... */
    },
  })
}