In the code below i have three options ( three blocks ) that i want to memoize to avoid re-rendering

The question seem trivial as these blocks are small and probably make no impact on performance, but as most of my components are written in this way, i belive it will impact my app’s performance

The question is:
How to memoize these small components?

The problem here is, i use “useStyle” library to memoize dynamic styles based on themecolor
and there are mutual variables that are defined in the main component and being used in the three small components

i will present three possible solutions and if someone can highlight the best solution or present something better

export default function CreateArticle() {
    const { StyleConfig, currentTheme } = React.useContext(ThemeContext);
    const { t } = useTranslation();

    const options_container = useStyle(() => [styles.options_container,{backgroundColor:bk2,}],[currentTheme]);
    const option = useStyle(() => [styles.option,{borderBottomColor:currentTheme == 'dark' ?StyleConfig.bk:StyleConfig.seprator,}],[currentTheme]);
    const option_txt = useStyle(() => [styles.option_txt,{color:StyleConfig.mainTxt}],[currentTheme]);
    const option_txt2 = useStyle(() => [styles.option_txt,{color:StyleConfig.mainTxt}],[currentTheme]);
    const icon = useStyle(() => [{color:StyleConfig.textColor}],[currentTheme]);
    const small_title = useStyle(() => [styles.small_title,{fontFamily:StyleConfig.font_semi_bold,color:StyleConfig.textColor,}],[currentTheme]);

    //STATES AND LOGIC GOES HERE...
    //open and close modals using context...

    return (
        <><View style={styles.rw}><Text style={small_title}>{t('article_option')}</Text></View>

            <View style={options_container}>

                <View style={option}>
                    <TouchableOpacity onPress={() => openModal_one(true)} style={styles.op_contain}>
                        <View >
                            <Text style={option_txt}>{t('article_scope')}</Text>
                            <Text style={option_txt2}>{t('article_scope_2')}</Text>
                        </View>
                        <Entypo name={"chevron-left"} size={24} style={icon} />
                    </TouchableOpacity>
                </View>

                <View style={option}>
                    <TouchableOpacity onPress={() => openModal_two(true)} style={styles.op_contain}>
                        <View>
                            <Text style={option_txt}>{t('article_post_date')}</Text>
                            <Text style={option_txt2}>{t('article_post_date_2')}</Text>
                        </View>
                        <Entypo name={"chevron-right"} size={24} style={icon} />
                    </TouchableOpacity>
                </View>

                <View style={option}>
                    <TouchableOpacity onPress={() => openModal_three(true)} style={styles.op_contain}>
                        <View>
                            <Text style={option_txt}>{t('article_mentions')}</Text>
                            <Text style={option_txt2}>{t('article_mentions_2')}</Text>
                        </View>
                        <Entypo name={"chevron-right"} size={24} style={icon} />
                    </TouchableOpacity>
                </View>
            </View></>
  )
}

• The first solution and the one i am using is moving the small components outside the main component, and pass the “useStyle” object as props, but this doesn’t seem good to me as i will pass probably 3-5 extra props which causes props

• the second solution is to use “useStyle” inside the small components, but in this way i’ll duplicate the use of “useStyle” and will add extra lines of code and probably more usage for memory