[Bug] Massive lag on UI updates 消息增多时卡顿严重

[Happ1ness-dev]

Describe the bug
The app is lagging, whenever a bot types a message, or any UI changes, basically.

To Reproduce
Steps to reproduce the behavior:

1. Accumulate big amount of chats with long message history.
2. Create a new chat.
3. Send a message.
4. Lag :(

Expected behavior
No lag?

Screenshots
I'll add a video

Deployment

• Docker
• Vercel
• Server (termux on the phone)

Smartphone:

• Device: Poco F3 (8/256)
• OS: Android 12, MIUI V13.0.7.0.SKHRUXM
• Browser: Soul Browser (based on chrome, afaik)
• Version 1.3.56 (chrome version 110)

I'm on latest commit (c98df33), at the moment.
And no, so many tabs don't make my browser lag :D

[Happ1ness-dev]

I tried to manually recreate the massive amount of chats with long messages history via masks (to profile things, on kiwi browser), but now it's just giving me an error, lol.

Unhandled Runtime Error
QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'chat-next-web-store' exceeded the quota.

  196 | }
  197 | 
> 198 | set((state) => ({
      |        ^
  199 |   currentSessionIndex: 0,
  200 |   sessions: [session].concat(state.sessions),
  201 | }));

The good thing is that I've managed to get enough chats to make things lag already.
28 chats are already enough. This is not even a fraction of the amount what I have on my main browser 👀

[Happ1ness-dev]

Omg it lags so hard. Yeah, it's certainly enough. It crashed both my browser and termux where I host the server, LMAO.

I don't even know how I would profile this thing with that amount of lag, honestly...

[Happ1ness-dev]

And this much lag was caused by a short message:
"Hello! I'm ChatGPT, a language model developed by OpenAI. I'm here to help answer your questions and engage in conversation on a wide range of topics. How can I assist you today?"

I may be blind, but this doesn't seem to explain why even closing the settings and dragging sliders is causing lag though.

[Happ1ness-dev]

I was just dragging message limit slider:

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

I was just dragging message limit slider:

[Happ1ness-dev]

Bot detected the issue body's language is not English, translate it automatically.

🤣
Yeah, I know, my English is not perfect, thanks for reminding, lol

[Happ1ness-dev]

I've profiled this also with react profiler.
Idk if this is helpful, but I'll leave these exported profiler results here, just in case.
react-profiler-results.zip

Also, here's a screenshot of chat lag:

I won't send a screenshot of slider lag, because I'm confused about what exactly causes it to lag. You better look into it yourself.

P.S.
Yeah, I just realised that I could export profiler results...
Well, it's my first time profiling things ¯⁠\⁠_⁠(⁠ツ⁠)⁠_⁠/⁠¯

[Yidadaa]

It doesn't seem to be caused by React, but rather by frequent reading and writing to localStorage, leading to the lag.

[Yidadaa]

This also explains why simply dragging the slider will cause lag.

[Happ1ness-dev]

I also had suspicion about similar thing, honestly, but didn't voice my thoughts, because I'm not really experienced in JavaScript

[Yidadaa]

@Happiness777

I wrote a micro benchmark, would you please run it on your phone?

https://codepen.io/yda_da/pen/rNQdrgB

[Happ1ness-dev]

would you please run it on your phone?

Benchmark log:


setting an array[10000] 10000 times
item length = 20001

Done in 1753ms

[Yidadaa]

On my phone:

Benchmark log:


setting an array[10000] 10000 times
item length = 20001

Done in 1137ms

It doesn't seem like the problem originated from here.