Render Dynamic components without setting disableRecycling=true

I am creating a RecyclerListView where the Items have a dynamic price ticker, so that on user event, the price ticker increments up. Currently the logic for a FeedItem.js is more or less:

import AnimateNumber   from 'react-native-countup'

export default class FeedItem extends Component {

	state = {
          walletValue      : 0
        , prevWalletValue  : 0
	}

	componentWillMount(){

		const walletValue = this.props.walletValue;
        this.setState({ 
              prevWalletValue : walletValue
            , walletValue     : walletValue
        })
	}

	invest = async () => {

		const update = await this.props.invest()

        if (!update)
            return false;

        if (update.hasOwnProperty('walletValue')){
            this.setState({ 
                  prevWalletValue: this.state.walletValue
                , walletValue    : update.walletValue 
            });
        }

	}

	renderTag = () => 
		<AnimateNumber 
			initial   = {this.state.prevWalletValue}
			value     = {this.state.walletValue}
			countBy   = {0.05}
		/>

	render = () => 
		<View>
			{this.renderTag()}
			<Button onPress = {this.invest} />
		</View>

}

Note there is a local state within each FeedItem that increments on user action. If I do not set disableRecycling=true, then the tag gets recycled when I scroll down and more FeedItems are loaded on refresh, this is concerning because the list is essentially rendering the first FeedItem’s price tag over and over again, and it’s only when the user presses the button, does the AnimatedNumber update to the new walletValue. Is there a way to prevent this behavior without setting disableRecycling=true and thus compromising performance?

[naqvitalha]

You shouldn’t have the state at component level. That will be difficult to handle. Can’t you simply store it at page level?

[tomLadder]

have the same issue.