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

View File

@ -259,7 +259,8 @@ export default function SettingsPage() {
}, []) }, [])
const buttons = useMemo( const buttons = useMemo(
() => [ () =>
[
{ {
name: 'Alarm sound', name: 'Alarm sound',
element: ( element: (
@ -297,8 +298,8 @@ export default function SettingsPage() {
</Button> </Button>
), ),
}, },
], ].filter(({name}) => name.toLowerCase().includes(term.toLowerCase())),
[changeSound, exportDatabase, soundString], [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>