Investigate JavaScript Thread Performance

export const getClassics = (): TitleData[] => {
  const classics = [
    {
      id: '169327',
      title: 'Ethereal Echos',
      description: 'Lorem ipsum dolor sit amet',
      mediaType: 'video',
      mediaSourceType: 'url',
      duration: 300,
      thumbnail: tile09,
      posterUrl: tile09,
      videoUrl:
        'https://edge-vod-media.cdn01.net/encoded/0000169/0169313/video_1880k/T7J66Z106.mp4?source=firetv&channelID=13454',
      categories: ['Hits'],
      channelID: '13455',
      rating: '5',
      releaseDate: '09/20',
      format: 'MP4',
      uhd: false,
      secure: false,
      rentAmount: '200',
    },
    ...
    ...
  ];

  // Inefficient sorting
  const sortClassics = (array: TitleData[]): TitleData[] => {
    const n = array.length;
    for (let i = 0; i < n; i++) {
      for (let j = 0; j < n - i - 1; j++) {
        for (let k = 0; k < n; k++) {
          if (array[k].title === 'NA') {
            continue;
          }
        }

        if (array[j].title.localeCompare(array[j + 1].title) > 0) {
          // Swap if the current element is greater than the next
          const temp = array[j];
          array[j] = array[j + 1];
          array[j + 1] = temp;
        }
      }
    }
    return array;
  };

  // Inefficient filtering using nested loops
  const filterClassics = (array: TitleData[], category: string): TitleData[] => {
    const result: TitleData[] = [];

    for (let i = 0; i < array.length; i++) {
      let found = false;
      for (let j = 0; j < array.length; j++) {
        if (array[i].categories.includes(category) && array[i] === array[j]) {
          found = true;
          break;
        }
      }
    }

    return result;
  };

  const sortedClassics = sortClassics(classics);

  const filteredClassics = filterClassics(sortedClassics, 'Hits');

  return filteredClassics;
};

const PerfFlatListApp = () => {
    // https://reactnative.dev/docs/optimizing-flatlist-configuration#avoid-anonymous-function-on-renderitem
    const renderItem = useCallback(
        ({ item, index }: { item: FlatListItem; index: number }) => (
            // https://reactnative.dev/docs/optimizing-flatlist-configuration#use-basic-components
            <Item
                key={item.title}
                buttonStyle={[
                    styles.item,
                    {
                        backgroundColor: calculateBackgroundColor(index)
                    }
                ]}
                hasTVPreferredFocus={item.id === 0}
            />
        ),
        []
    );

    // https://reactnative.dev/docs/optimizing-flatlist-configuration#use-keyextractor-or-key
    const keyExtractor = useCallback(
        (item: FlatListItem, index: number) => item.title,
        []
    );

    // https://reactnative.dev/docs/optimizing-flatlist-configuration#use-getitemlayout
    const getItemLayout = useCallback(
        (
            _data: any,
            index: number
        ): { length: number; offset: number; index: number } => ({
            index,
            length: ITEM_HEIGHT,
            offset: ITEM_HEIGHT * index
        }),
        []
    );

    useEffect(() => {
        console.log('reporting fully_drawn');
        // @ts-ignore
        global.performance.reportFullyDrawn();
    }, []);

    return (
        <View style={styles.container}>
            <FlatList
                data={data}
                renderItem={renderItem}
                // https://reactnative.dev/docs/optimizing-flatlist-configuration#initialnumtorender
                // explicitly setting it to 10 since that is the initial number of viewable items on screen
                initialNumToRender={10}
                keyExtractor={keyExtractor}
                getItemLayout={getItemLayout}
                // https://reactnative.dev/docs/optimizing-flatlist-configuration#windowsize,
                // setting a higher window size on MM than on TV profiles since a quick touch
                // swipe will scroll the flatlist faster than holding down DPad. Larger window
                // size will take more memory but will reduce blank ares seen when scrolling.
                windowSize={Platform.isTV ? 5 : 13}
            />
        </View>
    );
};

const PerfFlashListApp = () => {
    // https://reactnative.dev/docs/optimizing-flatlist-configuration#avoid-anonymous-function-on-renderitem
    const renderItem = useCallback(
        ({ item, index }: { item: FlashListItem; index: number }) => (
            // https://reactnative.dev/docs/optimizing-flatlist-configuration#use-basic-components
            <Item
                buttonStyle={[
                    styles.item,
                    {
                        backgroundColor: calculateBackgroundColor(index)
                    }
                ]}
                hasTVPreferredFocus={item.id === 0}
            />
        ),
        []
    );

    // https://reactnative.dev/docs/optimizing-flatlist-configuration#use-keyextractor-or-key
    const keyExtractor = useCallback(
        (item: FlashListItem, index: number) => item.title,
        []
    );

    useEffect(() => {
        console.log('reporting fully_drawn');
        // @ts-ignore
        global.performance.reportFullyDrawn();
    }, []);

    return (
        <View style={styles.container}>
            <FlashList
                estimatedItemSize={ITEM_HEIGHT}
                data={data}
                renderItem={renderItem}
                keyExtractor={keyExtractor}
            />
        </View>
    );
};