ecency / ecency-mobile

Ecency Mobile - reimagined social blogging, contribute and get rewarded (for Android and iOS)
https://ecency.com
MIT License
238 stars 70 forks source link

Assess android crash while creating post #2316

Open noumantahir opened 2 years ago

noumantahir commented 2 years ago

App crashes randomly while writing a post in editor..

Reported by Melinda

editor change PRs https://github.com/ecency/ecency-mobile/pull/2267/files https://github.com/ecency/ecency-mobile/pull/2249/files https://github.com/ecency/ecency-mobile/pull/2245/files https://github.com/ecency/ecency-mobile/pull/2243/files

Feruz's opinion: Might be related to link detection that was added, when typing or adding images, maybe link detect script causes memory leak somewhere

noumantahir commented 2 years ago

@feruzm check this.... so far I do not have a lock on how we can avoid this...but at-least we have some direction https://user-images.githubusercontent.com/6298342/170830490-9fcead6d-f500-4368-b570-4100464be8a7.mov

Screenshot 2022-05-28 at 7 48 26 PM
feruzm commented 2 years ago

@feruzm check this.... so far I do not have a lock on how we can avoid this...but at-least we have some direction https://user-images.githubusercontent.com/6298342/170830490-9fcead6d-f500-4368-b570-4100464be8a7.mov

Screenshot 2022-05-28 at 7 48 26 PM

Wow, it is indeed huge drop in performance. Maybe best way is to have single button that opens modal and in that screen explains how to format content? Static text and examples?! So people can type in formatting text or copy table snippet or code, that would still keep performance better, what do you think?

noumantahir commented 2 years ago

Note to self: Study in detail https://blog.swmansion.com/hunting-js-memory-leaks-in-react-native-apps-bd73807d0fde

noumantahir commented 2 years ago

Alright so far we have tried a few things to test if editor performance become better in any way.

  1. Tried to value directly using state instead of setNativeProps Result: this rather reduces the performance as TextInput becomes tightly bound to state.

  2. Removing font styling from TextInput, Result: this gives some benefit but still does not remove the slowing down editor when setNativeProps is using

  3. Removing all modal in editor just to see if that improves the performance Result: does not seem to improve performance in any way, though it does reduce the heap size used, may be something we can consider optimising moving forward

noumantahir commented 2 years ago

@feruzm

Alright, so what better way to testing the performance then to compare feature with something else... I compared editing after 500 with GitHub application... apparently both application slows down when handling such number words, the difference however is that. our app slows down even further after using setNativeProps...

My take away is that...

  1. we really cannot remove the delay when adding long words
  2. yet we should able to reduce the affect of setNativeProps using either of my suggestion given down below

Proposed solution...

  1. A quick solution would be to limit the number of words post to say 500 words or may be 1000 words.. app will still slow down.
  2. A more comprehensive and possible effective solution can be to bypass setNativeProps by creating native component that handle direct text manipulation. we can experiment with something simple first before going full crazy on this.

https://user-images.githubusercontent.com/6298342/170869097-e5834ed4-1d95-4e9a-b4e0-80b77e5c59ec.mov

noumantahir commented 2 years ago

Wow, it is indeed huge drop in performance. Maybe best way is to have single button that opens modal and in that screen explains how to format content? Static text and examples?! So people can type in formatting text or copy table snippet or code, that would still keep performance better, what do you think?

@feruzm What I have understood is, it not toolbar that is the source of problem for TextInput itself.