React 에러 "Maximum update depth exceeded"

useChat 또는 useCompletion 훅을 쓰는 React 프로젝트에서 AI 응답이 스트리밍될 때 "Maximum update depth exceeded" 에러가 나는 문제와 해결 방법을 알려드려요.

출처: 문서

본문

React 프로젝트에서 AI SDK를 useChat 또는 useCompletion 훅과 함께 사용하고 있는데, AI 응답이 스트리밍될 때 Maximum update depth exceeded 에러가 나요.

기본적으로 UI는 도착하는 매 청크(chunk)마다 다시 렌더링돼요. 이는 느린 기기나 복잡한 컴포넌트(예: Markdown)를 업데이트해야 할 때 렌더링을 과부하시킬 수 있어요. 스로틀링(throttling)으로 완화할 수 있어요.

throttle 옵션을 사용해 UI 업데이트를 스로틀링하세요:

const { messages, ... } = useChat({
  // 메시지와 데이터 업데이트를 50ms로 스로틀링:
  throttle: 50
})

const { completion, ... } = useCompletion({
  // completion과 데이터 업데이트를 50ms로 스로틀링:
  throttle: 50
})