Theo's Typesafe Cult•2y ago

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•2y 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•2y ago

Would this really be more performant when it's assigning extra memory for each word?

Neto•2y ago

if you wan't for performance you should start using memo's

Wezter•2y 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•2y 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•2y ago

Mainly looking for if there is something to improve the time complexity of it I guess.

Gaming

Programming

Can this function be improved performance wise?