Can this function be improved performance wise?

I am using a function to wrap part of texts that contains links, emails and urls with a component that links you in the appropriate way in React Native but since this could be used for rather long texts I am wondering if you see any potential performance improvements that could be made?
const renderTextWithLinks = (text: string): React.ReactNode => {
const allWords = text.split(' ');
return allWords.flatMap((word, index) => {
if (isEmail.test(word)) {
return (
<TextRN key={index} onPress={() => Linking.openURL(`mailto:${word}`)} style={styles.underlineText}>
{`${word} `}
</TextRN>
);
}
if (isPhoneNumber.test(word)) {
return (
<TextRN key={index} onPress={() => Linking.openURL(`tel:${word}`)} style={styles.underlineText}>
{`${word} `}
</TextRN>
);
}
if (isUrl.test(word)) {
return (
<TextRN key={index} onPress={() => Linking.openURL(word)} style={styles.underlineText}>
{`${word} `}
</TextRN>
);
}
return `${word} `;
});
};
const renderTextWithLinks = (text: string): React.ReactNode => {
const allWords = text.split(' ');
return allWords.flatMap((word, index) => {
if (isEmail.test(word)) {
return (
<TextRN key={index} onPress={() => Linking.openURL(`mailto:${word}`)} style={styles.underlineText}>
{`${word} `}
</TextRN>
);
}
if (isPhoneNumber.test(word)) {
return (
<TextRN key={index} onPress={() => Linking.openURL(`tel:${word}`)} style={styles.underlineText}>
{`${word} `}
</TextRN>
);
}
if (isUrl.test(word)) {
return (
<TextRN key={index} onPress={() => Linking.openURL(word)} style={styles.underlineText}>
{`${word} `}
</TextRN>
);
}
return `${word} `;
});
};
6 Replies
Neto
Neto13mo ago
const renderTextWithLinks = (text: string): React.ReactNode => {
const allWords = text.split(' ');
return allWords.flatMap((word, index) => {
let url: string | null = null
if (isEmail.test(word)) {
url = `mailto:${word}`
}
if (isPhoneNumber.test(word)) {
url = `tel:${word}`
}
if (isUrl.test(word)) {
url = word
}

if(url){
return (
<TextRN key={index} onPress={() => Linking.openURL(url)} style={styles.underlineText}>
{`${word} `}
</TextRN>
);
}

return `${word} `;
});
};
const renderTextWithLinks = (text: string): React.ReactNode => {
const allWords = text.split(' ');
return allWords.flatMap((word, index) => {
let url: string | null = null
if (isEmail.test(word)) {
url = `mailto:${word}`
}
if (isPhoneNumber.test(word)) {
url = `tel:${word}`
}
if (isUrl.test(word)) {
url = word
}

if(url){
return (
<TextRN key={index} onPress={() => Linking.openURL(url)} style={styles.underlineText}>
{`${word} `}
</TextRN>
);
}

return `${word} `;
});
};
maybe something like this
Wezter
Wezter13mo ago
Would this really be more performant when it's assigning extra memory for each word?
Neto
Neto13mo ago
if you wan't for performance you should start using memo's
Wezter
Wezter13mo ago
Yeah I will likely memoize it since this could technically be a text with thousands of characters. But more wondering on the function itself if there's any ways to optimize it?
Neto
Neto13mo ago
only testing and checking the memory graph and such you can find the most optimal performance but most of the time you will have to tradeoff something
Wezter
Wezter13mo ago
Mainly looking for if there is something to improve the time complexity of it I guess.