如何在React Native中更改按钮的颜色而不重置状态？

Question

I'm currently building a screen in react native that has a bunch of horizontal flatLists stacked vertically. Think uber eats, Spotify and Netflix.

The horizontal flatLists contain cards.

I have added like and share buttons to these cards. I want my users to be able to save or like the item in the card while scrolling. The way you can on instagram.

I click one the buttons to send a request to the backend which works.

The problem I am facing is that I want the buttons to change colour when I press them.

What I would normally do is place a new variable in state, that gets changed when the request to the backend is done.

The problem with this approach is that, it causes state to reload. This cause my component screen to reload. This is not an ideal user experience. I don't want the whole screen to flash when someone presses a button.

I also don't want my users to lose their place on the screen.

Is there a better approach that allows me to: 1) press the button 2) update the backend 3) Have my button change colour.

constructor(props) {
super(props)
this.state = {
  card: [],  
  saved: false,
  shared: false
}

}

  <FlatList
          data={card}
          keyExtractor={(index, item) => Math.random().toString()}
          horizontal
          renderItem={({ item }) => {
          return (
            <View>
              <TouchableOpacity
                onPress={() => this.description(item)}
              >
                <Card image={{uri: item.img}} containerStyle={{width: width * 0.8, height: height * 0.4}} >
                  <View style={{height: 60, justifyContent: 'center'}}>
                    <Text style={[textStyle, {fontSize: 16}]}>{item.name}</Text>          
                  </View> 
                  <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent:'space-between', width: width * 0.7 }}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>

                    </View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                      <View>
                        <Icon
                          name='bookmark'
                          type='Feather'
                          onPress={() =>  this.save(item._id)}
                          color={userHasPressedSave.includes(item._id) ? '#FF0000' : null}
                        />
                      </View>
                      <View>
                        <Icon
                          name='ios-heart'
                          type='ionicon'
                          onPress={() => this.shared(item._id)}
                        />
                      </View>
                    </View>
                  </View>
                </Card>
              </TouchableOpacity>
            </View>
          )
          }
        }
        />

Answer 1

This should be obvious ... If you don't want to modify 'global'/parent state then use 'local'/child state - just convert buttons into components.

Pass handlers to be able to call backend requests.

Use their local state to change color, content (like/unlike label), enable/disable, counter... whatever you need ... just 'think in react' ... tree of components.

You can also store changes in parent (within handlers) as class/object properties. Updating them (as opposed to updating the state) won't force rerendering but you will be able to use them when a rerender occurs.