Debounce compose form

[tribela]

Compose form's textarea was in a hell of re-rendering. Especially in CJK IME
It causes missing characters on low powered machines (even on my brand-new laptop), And it happened a lot and user experience was terrible as a Korean user.

As an example, I typed 가나다 (3 letters but 6 types)

ㄱ
가
간
가나
가낟
가나다

Before

render 가
render 가나
render 가낟
render 가
render 가나
render 가나다
render 가나
render 가나다

I don't know why they re-render more than 6 times (Maybe multiple hooks are used for onChange, onKeyup, onKeydown).

After

render ㄱ
render 가
render 간
render 가나
render 가낟
render 가나다
render 가나다 
render 가나다 @
render 가나다 @a
render 가나다 @ad
render 가나다 @ad
render 가나다 @admin

I set timeout to 1ms. It is enough to remove struggling effects, And also auto suggestions (mention, emoji, hashtag) are fine

[ClearlyClaire]

I'd much rather we find the source of these re-renders than set a debounce…

[ClearlyClaire]

Investigating a bit more, I can't find the reason it would be re-rendered more than once per keypress, and I also can't see it render more than the compose form itself. There's definitely some optimization to be done in the compose form render itself (mainly, optimize and memoize some of canSubmit, memoize a lot of the intl.formatMessage calls), but I don't know how much of a difference it can make.

I'm not completely against debouncing the onChange callback itself, but I'm wary of adding yet another dependency, and I wonder how much we can improve the performance of the compose form rendering code overall and if it could be enough.

[ClearlyClaire]

Everything is very fast on my computer, so I have trouble evaluating the changes, but could you check whether #17463 improves the situation for you?

[tribela]

Multiple render problem is caused on Firefox with compositing IME. related: facebook/react#3926
This case, debounce will help. But I agree with you to not use debounce to fix this kind of problem.

I'll check #17463 later on my beta instance

[tribela]

Update: I test with #17463. But sadly, Missing characters glitch happening again on my laptop with firefox.
(crome or brave has no problem. And also latin language doesn't have problem. Only Korean on firefox has this problem)

[ClearlyClaire]

Thanks for testing! I wonder if the missing character issue is a performance issue, or React and the IME somehow fighting over the value of the textarea? Did you notice any performance improvement with #17463? Either way, we probably need something like debouncing or handling compositionstart and compositionend events, but I'm wary of the subtle bugs it might introduce.

[tribela]

I'm back from digging about composition[start,end,update] thing!
And finally, I found a way to fix that render thing(more than once per keystroke).

[ClearlyClaire]

I'm back from digging about composition[start,end,update] thing! And finally, I found a way to fix that render thing(more than once per keystroke).

Do you have more on that?

[tribela]

Multiple renders at one keystroke was problem of IME (word commit and something else)
So, while debounce could be a partial solution, But it is not a mastodon's problem, I'll close this PR