feat: optimize subject picker

app/(app)/extraStudy/index.tsx

@@ -4,8 +4,6 @@ import { appStyles } from '@/src/constants/styles'
 import typography from '@/src/constants/typography'
 import { useSubjectCache } from '@/src/hooks/useSubjectCache'
 import { Subject, SubjectType } from '@/src/types/subject'
-import { StringUtils } from '@/src/utils/stringUtils'
-import { FontAwesome } from '@expo/vector-icons'
 import { router } from 'expo-router'
 import { useCallback, useMemo, useState } from 'react'
 import { Pressable, Text, View } from 'react-native'

app/_layout.tsx

@@ -1,3 +1,4 @@
+import '@/src/utils/time-polyfil'
 import { SessionProvider } from '@/src/context/authContext'
 import { createStore } from '@/src/redux/store'
 import { dbHelper } from '@/src/utils/dbHelper'

src/components/SubjectPickerPage.tsx

@@ -4,20 +4,21 @@ import { appStyles } from '@/src/constants/styles'
 import typography from '@/src/constants/typography'
 import { Subject } from '@/src/types/subject'
 import { Fragment, useCallback, useState } from 'react'
-import {
-  LayoutChangeEvent,
-  Pressable,
-  ScrollView,
-  Text,
-  View,
-} from 'react-native'
+import { Pressable, ScrollView, Text, View } from 'react-native'
 import { useSafeArea } from 'react-native-safe-area-context'
 import { createStyleSheet, useStyles } from 'react-native-unistyles'
 import { BlurView } from 'expo-blur'
 import Collapsible from './Collapsible'
+import React from 'react'
 
 const MAX_CATEGORY_HEIGHT = 84
 
+// This optimizes rendering a lot
+const MemoizedSubjectTile = React.memo(({ subject }: { subject: Subject }) => {
+  return <SubjectTile subject={subject} variant='compact' isPressable={false} />
+})
+MemoizedSubjectTile.displayName = 'MemoizedSubjectTile'
+
 export type Category = {
   name: string
   children: Category[] | Subject[]
@@ -123,11 +124,7 @@ export const SubjectPickerPage = ({
                                     styles.subjectTile,
                                     { opacity: isSelected ? 1.0 : 0.55 },
                                   ]}>
-                                  <SubjectTile
-                                    subject={subject}
-                                    variant='compact'
-                                    isPressable={false}
-                                  />
+                                  <MemoizedSubjectTile subject={subject} />
                                 </View>
                               </Pressable>
                             )

src/components/SubjectTile.tsx

@@ -104,6 +104,10 @@ export const SubjectTile = ({
     }
   })()
 
+  if (!isPressable) {
+    return node
+  }
+
   return (
     <Pressable
       disabled={!isPressable}

src/utils/time-polyfil.js

@@ -0,0 +1,52 @@
+'use strict'
+
+const PerformanceNow =
+  (global.performance && global.performance.now) ||
+  global.performanceNow ||
+  global.nativePerformanceNow || (() => { try {
+    var now = require('fbjs/lib/performanceNow')
+  } finally { return now }})();
+
+const DEFAULT_LABEL = 'default';
+const DEFAULT_PREC  = 3;
+
+let counts     = {};
+let startTimes = {};
+
+const fixed = n => Math.trunc(n) === n ? n + '' : n.toFixed(DEFAULT_PREC);
+
+console.time    = console.time    || ((label = DEFAULT_LABEL) => { startTimes[label] = PerformanceNow() });
+console.timeLog = console.timeLog || ((label = DEFAULT_LABEL, desc) => timeRecord(label, desc));
+console.timeEnd = console.timeEnd || ((label = DEFAULT_LABEL) => timeRecord(label, undefined, true));
+
+console.count = console.count || ((label = DEFAULT_LABEL) => {
+  if (!counts[label]) {
+    counts[label] = 0;
+  }
+  counts[label]++;
+  console.log(`${label}: ${counts[label]}`);
+});
+
+console.countReset = console.countReset || ((label = DEFAULT_LABEL) => {
+  if (counts[label]) {
+    counts[label] = 0;
+  } else {
+    console.warn(`Count for '${label}' does not exist`);
+  }
+});
+
+function timeRecord(label, desc, final) {
+  const endTime = PerformanceNow();
+  const startTime = startTimes[label];
+  if (startTime) {
+    const delta = endTime - startTime;
+    if (desc) {
+      console.log(`${label}: ${fixed(delta)}ms ${desc}`);
+    } else {
+      console.log(`${label}: ${fixed(delta)}ms`);
+    }
+    if (final) delete startTimes[label];
+  } else {
+    console.warn(`Timer '${label}' does not exist`);
+  }
+}