[🐛] Heavy re-rendering of MessageList

[arekkubaczkowski]

In our app, the MessageList is rendered within a bottom sheet (by Gorhom). To display it properly, we need to calculate the available height within the bottom sheet content and apply this to the list's container. This is necessary because by default, the bottom sheet renders its children without limiting their height, causing them to extend out of the viewport.

The issue arises when resizing the bottom sheet containing multiple messages. This action triggers numerous re-renders, which are not optimized effectively on Getstream's end. Consequently, after a few snap point movements, the app becomes unresponsive and hangs. A quick investigation revealed that the MessageList component and the renderItem method do not adhere to optimization principles, causing unnecessary re-renders.

        // animated height
        <Animated.View style={list.styles}>
          <MessageList
            {...messageListProps}
            additionalFlatListProps={{
              getItemLayout(_, index) {
                return {
                  index,
                  length: 62,
                  offset: 62 * index,
                };
              },
            }}
          />
        </Animated.View>
        <KeyboardStickyView
          style={keyboardView.styles}
          offset={keyboardView.offset}
        >
          <MessageInput
            ShowThreadMessageInChannelButton={() => null}
            Input={props => <GetStreamInput {...props} />}
          />
        </KeyboardStickyView>

Expected behavior

I would find it very helpful to get the MessageList and Message components more optimized so it doesn't affect smooth re-rendering.

Project Related Information

Environment

Click To Expand

package.json:

"stream-chat": "8.31.0",
"stream-chat-expo": "^5.31.1",

# N/A

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• stream-chat-react-native version you're using that has this issue:
  • e.g. 5.4.3
• Device/Emulator info:
  • I am using a physical device
  • OS version: e.g. Android 10
  • Device/Emulator: e.g. iPhone 11

Additional context

Screenshots

Click To Expand

---