JavaScriptスレッドのパフォーマンスの調査

 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',
     },
     ...
     ...
   ];

   // 非効率的な並べ替え
   定数ソートクラシックス = (配列: 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) {
           // 現在の要素が次の要素より大きい場合はスワップ
           const temp = array[j];
           array[j] = array[j + 1];
           array[j + 1] = temp;
         }
       }
     }
     return array;
   };

   // 入れ子になったループを使用した非効率的なフィルタリング
   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
                 // 明示的に10に設定しているのは、画面に表示できる項目数の初期値であるためです
                 initialNumToRender={10}
                 keyExtractor={keyExtractor}
                 getItemLayout={getItemLayout}
                 // https://reactnative.dev/docs/optimizing-flatlist-configuration#windowsize,
                 // TVプロファイルよりもMMでのウィンドウサイズを大きく設定しているのは、クイックtouch
                 // スワイプした場合、D-Padを長押しするよりもフラットリストをすばやくスクロールできるためです。ウィンドウサイズが
                 // 大きいほどより多くのメモリを消費しますが、スクロール時に表示される空白領域は少なくなります。
                 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>
    );
};