React Compiler 1.0 켰더니 useEffect가 무한 루프에 빠집니다

React Compiler 1.0이 stable 됐길래 회사 프로덕트에 도입했는데, 일부 컴포넌트에서 무한 렌더링이 발생합니다. Compiler 끄면 멀쩡합니다.

환경: React 19.2, Next.js 16, react-compiler@1.0.0, eslint-plugin-react-compiler 설치

문제 코드 — 단순화한 형태:

function SearchBox({ onResult }) {
  const [query, setQuery] = useState('')

  useEffect(() => {
    if (!query) return
    fetch(`/api/search?q=${query}`)
      .then(r => r.json())
      .then(data => onResult({ items: data, query }))  // ← 매번 새 객체
  }, [query, onResult])

  return <input value={query} onChange={e => setQuery(e.target.value)} />
}

Compiler 켜기 전: 잘 됨

Compiler 켠 후: 첫 검색 후 무한 렌더링 → 브라우저 멈춤

onResult 콜백을 받는 부모에서 setState를 하는 구조인데, Compiler가 onResult 메모이제이션을 어떻게 처리하는지 모르겠습니다. Compiler 켠 채로 어떻게 해결하나요?

댓글 0