diff --git a/native/chat/inner-robotext-message.react.js b/native/chat/inner-robotext-message.react.js --- a/native/chat/inner-robotext-message.react.js +++ b/native/chat/inner-robotext-message.react.js @@ -39,40 +39,46 @@ const { item, onLongPress, onPress } = props; const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme); const styles = useOverlayStyles(unboundStyles); - const { robotext } = item; - const robotextParts = splitRobotext(robotext); - const textParts = []; - let keyIndex = 0; - - for (const splitPart of robotextParts) { - if (splitPart === '') { - continue; - } - if (splitPart.charAt(0) !== '<') { - const darkColor = activeTheme === 'dark'; - const key = `text${keyIndex++}`; - textParts.push( - - {decodeURI(splitPart)} - , - ); - continue; - } - const { rawText, entityType, id } = parseRobotextEntity(splitPart); - - if (entityType === 't' && id !== item.messageInfo.threadID) { - textParts.push(); - } else if (entityType === 'c') { - textParts.push(); - } else { - textParts.push(rawText); + const { messageInfo, robotext } = item; + const { threadID } = messageInfo; + const textParts = React.useMemo(() => { + const robotextParts = splitRobotext(robotext); + const result = []; + let keyIndex = 0; + + for (const splitPart of robotextParts) { + if (splitPart === '') { + continue; + } + if (splitPart.charAt(0) !== '<') { + const darkColor = activeTheme === 'dark'; + const key = `text${keyIndex++}`; + result.push( + + {decodeURI(splitPart)} + , + ); + continue; + } + + const { rawText, entityType, id } = parseRobotextEntity(splitPart); + + if (entityType === 't' && id !== threadID) { + result.push(); + } else if (entityType === 'c') { + result.push(); + } else { + result.push(rawText); + } } - } + + return result; + }, [robotext, activeTheme, threadID, styles.robotext]); const viewStyle = [styles.robotextContainer]; if (!__DEV__) { @@ -143,4 +149,11 @@ }, }; -export { dummyNodeForRobotextMessageHeightMeasurement, InnerRobotextMessage }; +const MemoizedInnerRobotextMessage: React.ComponentType = React.memo( + InnerRobotextMessage, +); + +export { + dummyNodeForRobotextMessageHeightMeasurement, + MemoizedInnerRobotextMessage as InnerRobotextMessage, +};