Expensive render / Takes a second or two to initialize

[brunolemos]

Issue Description

GiftedChat is a bit slow to initialize : to show some cached messages. Seems like it's not optimized for performance.

Related report on this comment: #298 (comment) by @amitava82

Steps to Reproduce / Code Snippets

Render a GiftedChat with a dozen messages set.

Expected Results

See messages instantly, without seeing a loader nor a blank screen.

Additional Information

• Nodejs version: 8.9.0
• React version: 16.2.0
• React Native version: 0.52.2
• react-native-gifted-chat version: 0.2.9
• Platform(s) (iOS, Android, or both?): iOS (did not test on android)

[amitava82]

Yes, it is because of the md5 calculation that adds up time depending on number of messages. Once #705 gets merged, it should be fast

[brunolemos]

Not sure about that, I tested that PR and the initial render speed was not affected

[Jarred-Sumner]

@amitava82 is it possible to avoid doing the MD5? Perhaps just relying on the IDs of the messages and requiring the contents of the message otherwise to be immutable? Or would that not work?

[nuonical]

@Jarred-Sumner I removed the MD5 calculation and just used id's, and I didn't really see a performance difference.

[rodgetech]

Any updates on this yet?

[Faolain]

any thoughts here @FaridSafi ?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[adilosa]

Still experiencing this issue. I've added a spinner underneath the <GiftedChat> component to smooth out the UX a bit, but the delay is still too long.

I also noticed the Chat screen with <GiftedChat> gets unmounted when navigating back to the main contacts list screen. Perhaps this issue could be mitigated by leaving the Chat screen mounted.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[piranna]

We are having the same problem here.

[iskenz]

Same here !

[hubermat]

Same here.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aravi365]

The issue still persist! Any workarounds?? anyone ??

[noway]

Can this be reopened?

[noway]

It might be happening because the component spends first render on getting the height of the parent view:

react-native-gifted-chat/src/GiftedChat.tsx

Line 395 in 3900884

isInitialized: false, // initialization will calculate maxHeight before rendering the chat

[axeljeremy7]

anyone has fixed or can explain?

[fractalgelfo]

following, experiencing some supreme, UI-blocking slowness with long chat threads (100+ messages)

[AliSaeed090]

Still facing the same issue. Is there any update or any fix? using "react-native-gifted-chat": "^0.16.3",

[dwome]

Same for me. Experiencing the performance slow down even for simple text messages

[ChronoByteCosmonaut]

Same

[WillSmithTE]

I see there are already some sponsors on this project, what would it take to push this great library's focus towards performance for a while?

[derek-primumco]

I'm not sure anyone has identified why the first-pass rendering is so slow.