brandon.presley/Massive
brandon.presley
/
Massive
4
8
Fork 3
Code Issues 14 Pull Requests Activity

Move button filter to memoized call 

This reduces re-renders
This commit is contained in:
Brandon Presley 2022-12-24 19:58:55 +13:00
parent 48432188c3
commit 60cc619e39
1 changed files with 42 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
SettingsPage.tsx
View File

@ -259,46 +259,47 @@ export default function SettingsPage() {
}, [])
const buttons = useMemo(
() => [
{
name: 'Alarm sound',
element: (
<View
key="alarm-sound"
style={{
flexDirection: 'row',
alignItems: 'center',
paddingLeft: ITEM_PADDING,
}}>
<Subheading style={{width: 100}}>Alarm sound</Subheading>
<Button onPress={changeSound}>{soundString || 'Default'}</Button>
</View>
),
},
{
name: 'Export database',
element: (
<Button
key="export-db"
style={{alignSelf: 'flex-start'}}
onPress={exportDatabase}>
Export database
</Button>
),
},
{
name: 'Import database',
element: (
<Button
key="import-db"
style={{alignSelf: 'flex-start'}}
onPress={() => setImporting(true)}>
Import database
</Button>
),
},
],
[changeSound, exportDatabase, soundString],
() =>
[
{
name: 'Alarm sound',
element: (
<View
key="alarm-sound"
style={{
flexDirection: 'row',
alignItems: 'center',
paddingLeft: ITEM_PADDING,
}}>
<Subheading style={{width: 100}}>Alarm sound</Subheading>
<Button onPress={changeSound}>{soundString || 'Default'}</Button>
</View>
),
},
{
name: 'Export database',
element: (
<Button
key="export-db"
style={{alignSelf: 'flex-start'}}
onPress={exportDatabase}>
Export database
</Button>
),
},
{
name: 'Import database',
element: (
<Button
key="import-db"
style={{alignSelf: 'flex-start'}}
onPress={() => setImporting(true)}>
Import database
</Button>
),
},
].filter(({name}) => name.toLowerCase().includes(term.toLowerCase())),
[changeSound, exportDatabase, soundString, term],
)
return (
@ -309,9 +310,7 @@ export default function SettingsPage() {
<View style={{marginTop: MARGIN}}>
{switches.map(s => renderSwitch(s))}
{selects.map(s => renderSelect(s))}
{buttons
.filter(b => b.name.includes(term.toLowerCase()))
.map(b => b.element)}
{buttons.map(b => b.element)}
</View>
</Page>