Memoize the most expensive parts of SettingsPage

SettingsPage.tsx

@@ -30,7 +30,6 @@ export default function SettingsPage() {
   const [formatOptions, setFormatOptions] = useState<string[]>(twelveHours)
   const [importing, setImporting] = useState(false)
   const {reset} = useNavigation<NavigationProp<DrawerParamList>>()
-  const today = new Date()
 
   const {watch, setValue} = useForm<Settings>({
     defaultValues: () => settingsRepo.findOne({where: {}}),
@@ -80,32 +79,9 @@ export default function SettingsPage() {
     [settings],
   )
 
-  const changeString = useCallback(
+  const filter = useCallback(
-    async (key: keyof Settings, value: string) => {
+    ({name}) => name.toLowerCase().includes(term.toLowerCase()),
-      setValue(key, value)
+    [term],
-      await settingsRepo.save({...settings, [key]: value})
-      switch (key) {
-        case 'date':
-          return toast('Changed date format')
-        case 'darkColor':
-          setDarkColor(value)
-          return toast('Set primary color for dark mode.')
-        case 'lightColor':
-          setLightColor(value)
-          return toast('Set primary color for light mode.')
-        case 'vibrate':
-          return toast('Set primary color for light mode.')
-        case 'sound':
-          return toast('Sound will play after rest timers.')
-        case 'theme':
-          setTheme(value as string)
-          if (value === 'dark') toast('Theme will always be dark.')
-          else if (value === 'light') toast('Theme will always be light.')
-          else if (value === 'system') toast('Theme will follow system.')
-          return
-      }
-    },
-    [settings, setTheme, setDarkColor, setLightColor, setValue],
   )
 
   const changeBoolean = useCallback(
@@ -163,7 +139,42 @@ export default function SettingsPage() {
     [changeBoolean],
   )
 
-  const selects: Input<string>[] = [
+  const switchesMarkup = useMemo(
+    () => switches.filter(filter).map(s => renderSwitch(s)),
+    [filter, switches, renderSwitch],
+  )
+
+  const changeString = useCallback(
+    async (key: keyof Settings, value: string) => {
+      setValue(key, value)
+      await settingsRepo.save({...settings, [key]: value})
+      switch (key) {
+        case 'date':
+          return toast('Changed date format')
+        case 'darkColor':
+          setDarkColor(value)
+          return toast('Set primary color for dark mode.')
+        case 'lightColor':
+          setLightColor(value)
+          return toast('Set primary color for light mode.')
+        case 'vibrate':
+          return toast('Set primary color for light mode.')
+        case 'sound':
+          return toast('Sound will play after rest timers.')
+        case 'theme':
+          setTheme(value as string)
+          if (value === 'dark') toast('Theme will always be dark.')
+          else if (value === 'light') toast('Theme will always be light.')
+          else if (value === 'system') toast('Theme will follow system.')
+          return
+      }
+    },
+    [settings, setTheme, setDarkColor, setLightColor, setValue],
+  )
+
+  const selects: Input<string>[] = useMemo(() => {
+    const today = new Date()
+    return [
       {name: 'Theme', value: theme, items: themeOptions, key: 'theme'},
       {
         name: 'Dark color',
@@ -187,6 +198,7 @@ export default function SettingsPage() {
         key: 'date',
       },
     ]
+  }, [settings.date, darkColor, formatOptions, theme, lightColor])
 
   const renderSelect = useCallback(
     (item: Input<string>) => (
@@ -201,6 +213,11 @@ export default function SettingsPage() {
     [changeString],
   )
 
+  const selectsMarkup = useMemo(
+    () => selects.filter(filter).map(renderSelect),
+    [filter, selects, renderSelect],
+  )
+
   const confirmImport = useCallback(async () => {
     setImporting(false)
     await AppDataSource.destroy()
@@ -222,14 +239,8 @@ export default function SettingsPage() {
     toast('Database exported. Check downloads.')
   }, [])
 
-  const filter = useCallback(
-    ({name}) => name.toLowerCase().includes(term.toLowerCase()),
-    [term],
-  )
-
   const buttons = useMemo(
-    () =>
+    () => [
-      [
       {
         name: 'Alarm sound',
         element: (
@@ -267,8 +278,13 @@ export default function SettingsPage() {
           </Button>
         ),
       },
-      ].filter(filter),
+    ],
-    [changeSound, exportDatabase, soundString, filter],
+    [changeSound, exportDatabase, soundString],
+  )
+
+  const buttonsMarkup = useMemo(
+    () => buttons.filter(filter).map(b => b.element),
+    [buttons, filter],
   )
 
   return (
@@ -277,9 +293,9 @@ export default function SettingsPage() {
 
       <Page term={term} search={setTerm} style={{flexGrow: 0}}>
         <View style={{marginTop: MARGIN}}>
-          {switches.filter(filter).map(s => renderSwitch(s))}
+          {switchesMarkup}
-          {selects.filter(filter).map(s => renderSelect(s))}
+          {selectsMarkup}
-          {buttons.map(b => b.element)}
+          {buttonsMarkup}
         </View>
       </Page>