Performance issue

[shawhu]

HI,

I'm not sure how to fix it... Basically I use this in an expo project and it will render a bunch of messages returned by an AI service. it's a chatbot kinda thing anyway...

//this is the messages
const [messages, setMessages] = useState<MyMessage[]>(AVeryLongMessageList);
...
return (
<View>
    <TextInput />  //this will be quite sluggish...just copy some text here and try to use <- key to delete them, and you will see it's very slow...
    <FlatList
        ref={flatListRef}
        ListHeaderComponent={<View style={{ height: 10 }} />}
        ListFooterComponent={<View style={{ height: 70 }} />}
        showsVerticalScrollIndicator={false}
        data={messages}
        keyExtractor={(item, index) => index}
        renderItem={({ item }) => {
          return (
              <View style={{ padding: 5 }}>
                <Markdown style={{ body: { color: theme.colors.onSurface, fontSize: 16 } }}>
                  {item.content[0].text}
                </Markdown> //when I use Markdown, then it get's slow...
                <Text>{item.content[0].text}</Text> //If I comment out Markdown and switch to use Text, then, everything back to normal.
              </View>
          );
        }}
      />
</View>
)

Now, I understand that processing markdown is costly but...how do I improve the performance of Markdown? when nothing is changed, why does markdown continue to processs its child? even when the text has not been changed

[shawhu]

I tried a few things...for example:

import RenderHTML from "react-native-render-html";
import markdownit from "markdown-it";

const { width: screenWidth } = useWindowDimensions();
const md = markdownit();
...
<RenderHTML contentWidth={screenWidth} source={{ html: md.render(item.content[0].text) }} />

this is also fine without performance issues...