React Native Button onPress performance

Question

So I have these buttons that do 2 things like checkbox button, Change color , toggle between green and black Stating checked as true or false

My issue is : button that I pressed has mild delay before It changes color, bad performance overall for my app , already tried this in my Redmi 5 Redmi note 9 and Galaxy a8, they all have mild delay with different delay duration Redmi 5 has longest delay like almost 1 sec. My question is : Is there any faster / better performance code for these buttons ? Is this wrong way to do it ?

Here is my code : first I state the initial value

const [booleanMonth,setMonth]=useState([
{key:0,value:'January',title:'Jan',color:'black',checked:false},
{key:1,value:'February',title:'Feb',color:'black',checked:false},
{key:2,value:'March',title:'Mar',color:'black',checked:false},
{key:3,value:'April',title:'Apr',color:'black',checked:false},
{key:4,value:'May',title:'May',color:'black',checked:false},
{key:5,value:'June',title:'Jun',color:'black',checked:false},
{key:6,value:'July',title:'Jul',color:'black',checked:false},
{key:7,value:'August',title:'Aug',color:'black',checked:false},
{key:8,value:'September',title:'Sep',color:'black',checked:true},
{key:9,value:'October',title:'Oct',color:'black',checked:false},
{key:10,value:'November',title:'Nov',color:'black',checked:false},
{key:11,value:'December',title:'Dec',color:'black',checked:false}
])

second, I create the buttons

  const createButtonMonth = () =>{
    return (<View style={styles.containerForButtons2}>
            {
              booleanMonth.map((item,key) => 
                <View key={item.key} style={styles.buttonFilter3}>
                <Button style={styles.buttonFilter3}
                title={item.title} 
                value={booleanMonth[item.key].checked} 
                color={booleanMonth[item.key].checked==true ? 'green':'black'}
                onPress={()=>onPressMonthFilter(booleanMonth[item.key].key,booleanMonth[item.key].checked)}
                /></View>)
            }
            </View>)
    }

third I make function to change button color green to back and checked status from false to true vice versa

 const onPressMonthFilter = (keyMonth,statusMonth) =>{    
    let newArr = [...booleanMonth]
    if(newArr[keyMonth].checked==false){
      newArr[keyMonth].checked=true
    }else{
      newArr[keyMonth].checked=false
    }
    
    setMonth(newArr)

  }

thanks for the help

Answer 1

If you want to optimize the code itself, try useMemo() https://reactjs.org/docs/hooks-reference.html#usememo

Or React.memo() https://reactjs.org/docs/react-api.html#reactmemo

Basically, these check inputs like useEffect and determine if the part of function needs to rerender the component.

I am assuming setMonth(newArr) causes entire buttons to rerender, meaning as a number of elements in the booleanMonth increases, worse the performance gets.

Also, try to get release version of the apk/ipa. Usually, debug mode is really slow. Follow this https://reactnative.dev/docs/signed-apk-android.html and get --variabe=release.

Answer 2

Thanks to Hikaru Watanabe for the solution, here is the answer to my question.

So I just realized what slows me down is actually another 2 Arrays UseState (I dont include those in question since I thought it's not relatable); UseState for Year UseState for Branch

They all looping to create buttons just like I loop months button and its all re - render hence, looping again everytime i press Month button and vice versa

so this is the solution :

  const createButtonMonth = useMemo(() =>{
    console.log('createButtonMonth')
    return (<View style={styles.containerForButtons2}>
            {
              booleanMonth.map((item,key) => 
                <View key={item.key} style={styles.buttonFilter3}>
                <Button style={styles.buttonFilter3}
                title={item.title} 
                value={booleanMonth[item.key].checked} 
                onCheckColor='red'
                color={booleanMonth[item.key].checked==true ? 'green':'black'}
                onPress={()=>onPressMonthFilter(booleanMonth[item.key].key,booleanMonth[item.key].checked)}
                /></View>)
            }
            </View>)
  },[booleanMonth])

althou it's way faster but it still slows since

 const onPressMonthFilter = (keyMonth,statusMonth) =>{    
    let newArr = [...booleanMonth]
    if(newArr[keyMonth].checked==false){
      newArr[keyMonth].checked=true
    }else{
      newArr[keyMonth].checked=false
    }
    
    setMonth(newArr)

  }

code above still loops everytime and still dont have solution for this