joseph/Massive
1
0
Fork 0
Code Pull Requests Activity

Move button filter to memoized call

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