react-native FlatList 너무 느림 현상

Question

리액트 네이티브에서 Flatlist로 구현된 채팅 메세지가 너무 느립니다. 신기하게 안드로이드에서만 느리고 ios는 또 멀쩡하게 잘되더라구요. 짧은 메세지들은 잘되는데 메세지들이 조금만 길어지면 버벅거리는 현상이 심하더라고요. 혹시 원인을 알고 계신분 있나요?

FlatList 구현자체는 몇몇개의 prop 더 해진거 말고는 공식문서 예시와 거의 동일합니다.
- https://reactnative.dev/docs/flatlist

손정현 · Answer

안녕하세요!

혹시 안드로이드와 리액트 네이티브 버전이 어떻게 되시나요? FlatList prop 중에 inverted 옵션을 사용하고 계신가요? 저희도 최근에 유사한 이슈를 마주해서 열심히 찾아봤는데 inverted Flatlist를 사용하고 있으시면 이미 깃허브에 열심히 토론되고 있는 주제더라구요. 확인해보시면 좋을 것 같습니다.
- https://github.com/facebook/react-native/issues/30034

글 좀만 내려보시면 patch-package로 react-native FlatList 쪽 스타일을 수정한 버전이 있습니다. 요거 적용하시면 어느정도 도움이 될 것 같아요 
- https://github.com/facebook/react-native/issues/30034#issuecomment-806396274

inverted을 사용하지 않는데 안드로이드에서 FlatList 관련 성능 이슈가 있다면, 원인을 조금 더 파 봐야 알 것 같습니다. 좀 일반적인 방법이라면 공식 문서에 있는 FlatList 최적화 방법도 도움이 될 것 같고 Shopify에서 만든 FlashList도 참고해보시면 좋을 것 같습니다 :)
- https://reactnative.dev/docs/optimizing-flatlist-configuration
- https://shopify.github.io/flash-list/

범진 · Answer

저도 이부분 때문에 안드로이드에서만 렉이 발생해서 찾아보니 textinput에 타이핑 시에 flatlist의 renderitem이 계속 호출되고 리랜더링 됩니다. 이거때매 성능저하가 일어나는 것 같은데 flashlist사용하니 이런 현상이 사라졌네요