Error "Maximum update depth exceeded"

[lexermal]

Hello, and thank you for this fantastic demo project! I’m reporting an issue I encountered when setting up the project from the main branch.

Issue Details:

• Setup: I followed the setup instructions for the Node environment, using Livekit credentials and an OpenAI key.
• Errors: Running the app triggered "Maximum update depth exceeded" errors in transcript.tsx and use-agent.tsx as soon as the conversation started.

Temporary Workarounds:

• In transcript.tsx: I wrapped handleScrollVisibility in a useEffect function with conditions on scrollContainerRef, scrollButtonRef, and displayTranscriptions.

• In use-agent.tsx (line 122): I updated state only if mergedSorted had changed, using the following check:

  if (
    mergedSorted.length !== displayTranscriptions.length ||
    mergedSorted.some((item, index) => {
        const currentItem = displayTranscriptions[index];
        return (
            item.segment.id !== currentItem.segment.id ||
            item.segment.text !== currentItem.segment.text ||
            item.segment.firstReceivedTime !== currentItem.segment.firstReceivedTime ||
            item.segment.lastReceivedTime !== currentItem.segment.lastReceivedTime
        );
    })
  ) {
    setDisplayTranscriptions(mergedSorted);
  }

I’m not certain if these solutions are optimal, which is why I haven’t submitted a pull request. However, I hope this information helps to resolve the issues quickly.

[AngeloGiacco]

i had to do something similar to fix it