'React Native App rendering screen slow with reusable functional components
I am having issues with rendering a screen faster, more specifically rendering a Settings screen. I noticed that the issue stems from my reusable functional components having to render data. If I remove these components it will render faster. I have a couple options when it comes to create a list item for settings page. One is a "Switch" component the other is a "Button" Component. An example that I go through is when I click the Settings button it takes about 3 seconds to render the page and for it to become visible. If I click the home button it responds almost instantaneously. Hoping someone can guide me in the right direction with the best practices. Thank you
Here is some code...
export function Settings({ navigation }) {
...
const SettingsSwitchOption = React.memo(({ title, info, switchFN, switchState }) => {
return (
<Pressable onPress={()=>{switchFN()}}>
<Box borderBottomWidth="1" _dark={{ borderColor: "gray.600" }} borderColor="coolGray.200" pl="4" pr="5" height="125">
<HStack space={3} h="100%" alignItems="center" justifyContent="center">
<VStack width="80%" px={3}>
<Text fontSize={20} fontWeight="light" _dark={{
color: "warmGray.50"
}} color="coolGray.800">
{title}
</Text>
<Text mt={2} color="coolGray.600" _dark={{
color: "warmGray.200"
}}>
{info}
</Text>
</VStack>
<Spacer />
<Box w="20%" px={3}>
<Switch offTrackColor="gray.100" onTrackColor="primary.100" onThumbColor="light.100" offThumbColor="light.100" isChecked={switchState} onToggle={() => switchFN()} />
</Box>
</HStack>
</Box>
</Pressable>
)
});
const SettingsButtonOption = React.memo(({ title, info, buttonFN, iconName, iconColor }) => {
return (
<Pressable onPress={()=>{buttonFN()}}>
<Box borderBottomWidth="1" _dark={{ borderColor: "gray.600" }} borderColor="coolGray.200" pl="4" pr="5" height="125">
<HStack space={3} h="100%" alignItems="center" justifyContent="center">
<VStack width="80%" px={3}>
<Text fontSize={20} fontWeight="light" _dark={{
color: "warmGray.50"
}} color="coolGray.800">
{title}
</Text>
<Text mt={2} color="coolGray.600" _dark={{
color: "warmGray.200"
}}>
{info}
</Text>
</VStack>
<Spacer />
<Box w="20%" px={3}>
<IconButton variant="solid" bg="transparent" onPress={() => buttonFN()}
icon={<Icon as={MaterialCommunityIcons} size="10" name={iconName}
_dark={{ color: "#000" }} />} _icon={{ color: iconColor, size: "md" }}
_hover={{ backgroundColor: 'gray.200' }} _pressed={{ backgroundColor: 'gray.200' }} _focus={{ backgroundColor: 'gray.100' }} />
</Box>
</HStack>
</Box>
</Pressable>
)
});
...
return(
{/* LOGOUT */}
<SettingsButtonOption title="Logout" info="Sign out of account." buttonFN={logout}
iconName="logout-variant" iconColor="danger.500" />
{/* WIFI UPLOADS ONLY */}
<SettingsSwitchOption title="WiFi Uploads Only" info="All files, images, videos, etc will only upload on WiFi" switchFN={togglewifiuploads} switchState={wfuoChecked} />
...More components
)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
