Input super slow in v1.1.1 compared to v0.16.3

[claudiozam]

Issue Description

Hi, i tested the new release v1.1.1. It works ok, but the input grow is super slow now (Compared with 0.16.3). The JS FPS Drop to zero.

react-native-gifted-chat version: 1.1.1 video

https://user-images.githubusercontent.com/2105644/214525800-1bcc0d8f-c0f9-4662-9d00-b23477a1fbff.mov

react-native-gifted-chat version: 0.16.3 video

https://user-images.githubusercontent.com/2105644/214525865-37e70ec9-80e0-4ec0-aee0-3617ae702cec.mov

Steps to Reproduce / Code Snippets

Type letters and press return in the input.

Expected Results

The JS FPS must have an average of 40 or 50 like in the v0.16.3 in order to have a good UI experience.

Additional Information

Nodejs version: v18.9.1 React version: 18.2.0 React Native version: 0.71.1 react-native-gifted-chat version: 1.1.1 Platform(s) (iOS, Android, or both?): both

[tbergeron]

I have the same problem but mine is even slower. It shrinks rapidly but it grows super slowly.

[ronenempathy]

I have the same issue when upgrading to 1.1.1

[rcerrejon]

I have the same problem, especially if I delete some of the text and type again.

[felixspitzer]

Same here. Even crashes the app sometimes.. If you need more info or help in some way please let us know @FaridSafi

[emilstepanian]

Mine is slow as well, but also when I click 'send'. Its initially quick if there's few messages in the chat, but then it gets slower and slower

[hjhjdev]

Have this issue with fresh project setup.

[ZHRhodes]

Also having this issue with a fresh project setup. Lag gets increasingly worse with more messages. As a workaround, this issues goes away when I switch from Hermes engine to JSC.

[ihonomic]

I have the same problem after upgrading to expo SDK 48. Inputting text works fine, but slows terribly when I press send or try to close the keyboard.

@ZHRhodes I tried switching jsengine to JSC but didn't solve the lagging problem.

[tbergeron]

I’m trying to debug this issue. Its partly because of the last PR that was to fix the multiline growing input field (https://github.com/FaridSafi/react-native-gifted-chat/pull/2323). But there seems to be a deeper problem.

Why is the send button the only part of the UI that gets completely unusable? As soon as I stop typing, the button remains unusable for seconds. The more content in the chat the worse it gets. I can select text, type, play with any other part of the UI without noticeable lag but the send button is the one impacted.

Anyone has an idea?

[tbergeron]

This seems to be at cause for the unpressable send button issue: https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/Send.tsx#L62-L66

I removed the useCallbackOne and the condition around the onSend call and so far it removed the issue for me.

So that function looks like:

const handleOnPress = () => onSend({ text: text.trim() } as Partial<TMessage>, false)

I don't see why there is a check for text there when in fact it should be in the onSend() function.

Please note that this is not a fully tested way to work around the issue so test it thoroughly before putting this in production. Let me know if this helps.

[fukemy]

giftedchat handle it's height internally, I removed this then used autogrowtextinput. it's smoother because it's does not trigger re-render giftedchat on every size change

[tbergeron]

@fukemy

giftedchat handle it's height internally, I removed this then used autogrowtextinput. it's smoother because it's does not trigger re-render giftedchat on every size change

autogrowtextinput care to elaborate? are you talking about https://www.npmjs.com/package/react-native-autogrow-textinput?

[fukemy]

yes

[emilstepanian]

I am also experiencing it becoming really slow. For me, the chat is super smooth for the first 10 messages, but then it just slows down more and more with regards to the input and press send, after each message.

[fukemy]

I am also experiencing it becoming really slow. For me, the chat is super smooth for the first 10 messages, but then it just slows down more and more with regards to the input and press send, after each message.

you need to memo the message item for avoid re-render much times

[Haianh9999]

@fukemy I have the same error, I have memo message but the problem is not solved. Input grow up is only smooth when there are 20 records if there are 100 records it will lag.

[fukemy]

@Haianh9999, you need to config the FlatList props to avoid render to much in screen. The other thing is we can only memo the MessageText while it's hold only text props

[Haianh9999]

@fukemy Could you give me an example?

[fukemy]

@Haianh9999 https://reactnative.dev/docs/optimizing-flatlist-configuration

[Haianh9999]

@fukemy Please check this video, input grow up too slow.

https://user-images.githubusercontent.com/96808297/231345124-4f8144d4-074c-4243-884d-8f1c5398e890.MP4

[Haianh9999]

@fukemy Can you give a specific example when you use react native gifted chat library. For example sandbox links?.

[fukemy]

Sorry I am busy but I can give you some advices:

1. Do not use [text, setText] directly into GiftedChat, because it's will make app super slow coz of much re-render
2. Memo all the item inside your eyes
3. Switch back to v0.16.3 to get smoother keyboard grow
4. Improve the FlatList config
5. Do not use too much state in chatScreen to avoid unnecessary re-render

[fukemy]

@fukemy Please check this video, input grow up too slow.

It's seem when the contentSize changed the GiftedChat re-render, so all the items inside it's re-render too, I am using rn auto grow textview to avoid it

[Haianh9999]

@fukemy On android everything works fine but on ios the input is slow to grow up.

[rcerrejon]

I have tried version 2.4.0, same result, the bug still exists.

[felixspitzer]

For us the problem was within the virtualised list of react native. Maybe that is helpful for anyone

[mkhoussid]

For us the problem was within the virtualised list of react native. Maybe that is helpful for anyone

How'd you solve it? Many months later, issue persists

[FlavioScimeca]

For us the problem was within the virtualised list of react native. Maybe that is helpful for anyone

Did you fix that ?

[Rk5422686]

https://github.com/FaridSafi/react-native-gifted-chat/issues/2149#issuecomment-1310858808

The answer on this thread helped me fixing the lag.

[claudiozam]

@Rk5422686 Did you use the perf monitor?

Do you have a patch?

Thanks

[Jankaz2]

@Haianh9999 hi, would you like to share the code you used for the style of composer and input toolbar? I really like it