[BUG] Excessive CPU and Memory Usage During Rendering of Long Responses

statefb commented 5 months ago

Describe the bug

When rendering long responses from the AI assistant, there is a significant increase in CPU and memory usage. This issue seems to be caused by the continuous re-rendering of the chat area as each character is streamed and appended to the response.

To Reproduce

Open the chat application.
Send a prompt that would generate a long response from the AI assistant.
Observe the CPU and memory usage spiking as the response is being rendered character by character.

Screenshots

Additional context

A warning is being displayed: "Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render."
For a response of around 1000 characters, the memory usage can reach up to 2GB.
The CPU and memory usage stabilize once the response rendering is complete.

Potential solutions:

Implement a mechanism to control the re-rendering interval during the streaming process.
Optimize the rendering process to minimize unnecessary re-renders.
Investigate and address the root cause of the "Maximum update depth exceeded" warning.

k70suK3-k06a7ash1 commented 5 months ago

https://github.com/streamich/react-use/blob/master/docs/useDebounce.md#usedebounce これ使えるかと思います

Taikono-Himazin commented 5 months ago

useDebounceを使うと、クリックしてから100ms後に変更が反映されてしまうのでやりたいことと少し違いますね。おそらく使うならuseThrottleまたはuseThrottleFnだと思うのですが、なぜかうまくできません。

useDebounceを使ったバージョンをいったPRで建ててみますので、見てもらえないでしょうか。

kyosuke-kobayashi-lvgs commented 5 months ago

ちょっと趣旨と変わりますが、chatGPT側は、メッセージエリア部分だけレンダリングするようにメモ化してるみたいです

kyosuke-kobayashi-lvgs commented 5 months ago

今回のパフォーマンスチューニングの件も、遅延させるよりも、そもそも前提として適切にメモ化する方針の方がいいかもしれないですね

また、React19から、ReactForgetCompilerがリリースされる予定なので、それまで待てるなら、19系へのバージョンアップによって解消される可能性が高いです

See : https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024

k70suK3-k06a7ash1 commented 5 months ago

すいません、上記会社アカウントで返信しちゃいました

上記鑑み、対応方針どうしましょう useDebounceでの実装案、ミスリードしちゃいましたmm

Taikono-Himazin commented 5 months ago

Reactヨクワカライなので、どのようにコンポーネントを分割してメモ化すれば良いのかよく分からないです。 React Forget Compilerについて調べたら、やりたいことコレコレという感じに見えるので、待ちで良いかもしれませんね。 React18から19へのアップデートに大きな手間がかかるようなら適切なメモ化を検討することにしましょうか。

k70suK3-k06a7ash1 commented 5 months ago

@Taikono-Himazin 承知しました！

@statefb @wadabee こちらご確認いただけますと幸いですmm

ただ、内部の状態管理設計を変えないとReact19のCompilerの恩恵受けられないかもなので、必ずしもバージョンアップで対応完了となるかは確定ではない点、補記しておきます。

wadabee commented 5 months ago

ありがとうございます！パフォーマンスチューニングはメモ化が正攻法なので、メモ化の最適化は行いたいですね！

React19へのバージョンアップはメモ化を目的に行うものではないので、本件とは別件として検討させてください！

Taikono-Himazin commented 3 months ago

すみません。これは皆様に伺いたいのですが、履歴が大きくなると特に負荷が大きくなって困っている。という報告が上がってきているのですが、皆様はあまりパフォーマンスについて問題を感じたことはありませんか？

k70suK3-k06a7ash1 commented 3 months ago

@Taikono-Himazin https://github.com/aws-samples/bedrock-claude-chat/pull/386 一旦、DraftでreactCompilerのPR作りました React19へのバージョンアップが必要なので、時間ある時にバージョンアップ対応もしておきますね

Taikono-Himazin commented 3 months ago

おお！対応ありがとうございます！

これはマージされる予定はあったりするのでしょうか？

k70suK3-k06a7ash1 commented 3 months ago

@Taikono-Himazin React19がstableになったら追加対応進めておきます〜

aws-samples / bedrock-claude-chat