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

[statefb]

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

1. Open the chat application.
2. Send a prompt that would generate a long response from the AI assistant.
3. 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]

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

[Taikono-Himazin]

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

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

[kyosuke-kobayashi-lvgs]

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

[kyosuke-kobayashi-lvgs]

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

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

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

[k70suK3-k06a7ash1]

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

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

[Taikono-Himazin]

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

[k70suK3-k06a7ash1]

@Taikono-Himazin
承知しました！

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

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

[wadabee]

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

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

[Taikono-Himazin]

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

[k70suK3-k06a7ash1]

@Taikono-Himazin
#386
一旦、DraftでreactCompilerのPR作りました
React19へのバージョンアップが必要なので、時間ある時にバージョンアップ対応もしておきますね

[Taikono-Himazin]

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

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

[k70suK3-k06a7ash1]

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