React 19 useTransition 무한 로딩 해결법

'use client'

import { useEffect, useMemo, useState, useTransition } from 'react'

export default function SearchBad() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState<string[]>([])
  const [isPending, startTransition] = useTransition()

  // 문제: query가 바뀌면 effect가 fetch 후 results를 바꾸고,
  // 그 결과가 또 다른 effect/계산을 유발하면서 연쇄 업데이트가 생길 수 있음
  useEffect(() => {
    let cancelled = false
    ;(async () => {
      const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`)
      const data = (await res.json()) as { items: string[] }
      if (!cancelled) {
        // 여기서 업데이트가 발생하면 pending은 "이 업데이트가 끝날 때까지" 유지
        // 그런데 다른 곳에서 query/results를 다시 만지면 pending이 계속 이어질 수 있음
        setResults(data.items)
      }
    })()

    return () => {
      cancelled = true
    }
  }, [query])

  const onChange = (v: string) => {
    startTransition(() => {
      setQuery(v)
    })
  }

  return (
    <div>
      <input value={query} onChange={(e) => onChange(e.target.value)} />
      {isPending ? <p>Loading...</p> : null}
      <ul>
        {results.map((r) => (
          <li key={r}>{r}</li>
        ))}
      </ul>
    </div>
  )
}

'use client'

import { useEffect, useState, useTransition } from 'react'

export default function SearchGood() {
  const [query, setQuery] = useState('')
  const [results, setResults] = useState<string[]>([])
  const [loading, setLoading] = useState(false)
  const [isPending, startTransition] = useTransition()

  useEffect(() => {
    if (!query) {
      setResults([])
      return
    }

    const ac = new AbortController()
    setLoading(true)

    ;(async () => {
      try {
        const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
          signal: ac.signal,
        })
        const data = (await res.json()) as { items: string[] }
        setResults(data.items)
      } finally {
        setLoading(false)
      }
    })()

    return () => ac.abort()
  }, [query])

  const onChange = (v: string) => {
    // transition은 "입력 변경" 같은 UI 업데이트에만 사용
    startTransition(() => setQuery(v))
  }

  return (
    <div>
      <input value={query} onChange={(e) => onChange(e.target.value)} />
      {(isPending || loading) && <p>Loading...</p>}
      <ul>
        {results.map((r) => (
          <li key={r}>{r}</li>
        ))}
      </ul>
    </div>
  )
}

'use client'

import { useEffect, useState, useTransition } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'

export default function QuerySyncBad() {
  const router = useRouter()
  const sp = useSearchParams()
  const [q, setQ] = useState('')
  const [isPending, startTransition] = useTransition()

  // URL -> state
  useEffect(() => {
    setQ(sp.get('q') ?? '')
  }, [sp])

  // state -> URL
  useEffect(() => {
    const next = new URLSearchParams(Array.from(sp.entries()))
    next.set('q', q)

    startTransition(() => {
      router.replace(`?${next.toString()}`)
    })
  }, [q, router, sp])

  return (
    <div>
      <input value={q} onChange={(e) => setQ(e.target.value)} />
      {isPending && <p>Loading...</p>}
    </div>
  )
}

'use client'

import { useEffect, useMemo, useState, useTransition } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'

function normalizeQuery(q: string) {
  return q.trim()
}

export default function QuerySyncGood() {
  const router = useRouter()
  const sp = useSearchParams()
  const [q, setQ] = useState('')
  const [isPending, startTransition] = useTransition()

  const urlQ = useMemo(() => sp.get('q') ?? '', [sp])

  // URL -> state (필요할 때만)
  useEffect(() => {
    const normalized = normalizeQuery(urlQ)
    if (normalized !== q) setQ(normalized)
    // q를 의존성에 넣으면 또 루프가 될 수 있어, 의도적으로 urlQ만 감시
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [urlQ])

  // state -> URL (정규화 후 비교)
  useEffect(() => {
    const normalized = normalizeQuery(q)
    const current = normalizeQuery(urlQ)
    if (normalized === current) return

    const next = new URLSearchParams(Array.from(sp.entries()))
    if (normalized) next.set('q', normalized)
    else next.delete('q')

    startTransition(() => {
      router.replace(`?${next.toString()}`)
    })
  }, [q, urlQ, router, sp, startTransition])

  return (
    <div>
      <input value={q} onChange={(e) => setQ(e.target.value)} />
      {isPending && <p>Loading...</p>}
    </div>
  )
}

startTransition(async () => {
  const res = await fetch('/api')
  const data = await res.json()
  setItems(data.items)
})

const load = async () => {
  const res = await fetch('/api')
  return (await res.json()) as { items: string[] }
}

const onClick = async () => {
  setLoading(true)
  try {
    const data = await load()
    startTransition(() => {
      setItems(data.items)
    })
  } finally {
    setLoading(false)
  }
}

useEffect(() => {
  const ac = new AbortController()
  let alive = true

  ;(async () => {
    const res = await fetch('/api', { signal: ac.signal })
    const data = await res.json()
    if (alive) setItems(data.items)
  })()

  return () => {
    alive = false
    ac.abort()
  }
}, [])

'use client'

import { useEffect, useMemo, useState, useTransition } from 'react'

type Item = { id: string; title: string }

export default function SearchPattern() {
  const [input, setInput] = useState('')
  const [query, setQuery] = useState('')
  const [items, setItems] = useState<Item[]>([])
  const [loading, setLoading] = useState(false)
  const [isPending, startTransition] = useTransition()

  // 입력은 즉시 반영
  const onChange = (v: string) => {
    setInput(v)
    // 실제 검색 쿼리 반영은 transition으로 늦춰 UI 반응성을 확보
    startTransition(() => setQuery(v.trim()))
  }

  const enabled = useMemo(() => query.length > 0, [query])

  useEffect(() => {
    if (!enabled) {
      setItems([])
      return
    }

    const ac = new AbortController()
    setLoading(true)

    ;(async () => {
      try {
        const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
          signal: ac.signal,
        })
        const data = (await res.json()) as { items: Item[] }
        setItems(data.items)
      } finally {
        setLoading(false)
      }
    })()

    return () => ac.abort()
  }, [query, enabled])

  return (
    <section>
      <label>
        Search
        <input value={input} onChange={(e) => onChange(e.target.value)} />
      </label>

      {(isPending || loading) && <p>Loading...</p>}

      <ul>
        {items.map((it) => (
          <li key={it.id}>{it.title}</li>
        ))}
      </ul>
    </section>
  )
}