CODEWITHSUNDEEP
javascriptreactjsreact-native
Alwaysblue
Alwaysblue

Reputation: 11940

high memory consumption in basic react-native app

I was making my first react native and as much easy I though it would be, it is turning out to be difficult for me to understand what I could be doing wrong.

To start with, I have a very simple app which fetches data through redux 

componentWillMount() {

    this.props.fetchCoin()
    this.props.CurrencyRate()
  }

and then renders this in its return part 

 return (
     <ScrollView>
                 <Header />
                 {/* Custom Search Input */}
                 <View>
                 <TextInput
                  style={textInput}
                  placeholder="Search Coin"
                  onChangeText={(text) => this.onSearch(text)} />
                  </View>
                  <View>
                  <FlatList
                   data={this.state.searchCoin ? displaySearchCrypto : this.props.cryptoLoaded}
                   renderItem={({ item }) => (
                   <CoinCard
                      key={item["long"]}
                      coinShortName = {item["short"]}
                      coinName = {item["long"]}
                      coinPrice = {item["price"].toFixed(2)}
                      marketCap = {(item["mktcap"]/1000000000).toFixed(4)}
                      percentChange = {item["perc"].toFixed(2)}
                      vwapData={item["vwapData"].toFixed(2)}
                      coinImage={"https://coincap.io/images/coins/" + item["long"] + ".png"}
                      />
                  )}
          />
          </View>
               </ScrollView>
           )
      }
    }

I am seeing my ram consumption to be greater than 500 MB even after the app have fetched data and UI thread sticked to 60 (fps) where i think nothing in UI is happening

Instead of sharing all my code: You can find most of the stuff at github The above snippet code is shared from here: https://github.com/irohitb/Crypto/blob/master/src/container/cryptoContainer.js

The CoinCard Component in the above code can be seen here: https://github.com/irohitb/Crypto/blob/master/src/components/CoinCard.js

And Action for the same is here: https://github.com/irohitb/Crypto/blob/master/src/actions/cryptoAction.js

[Question:] Can someone please help me find out what am I doing wrong and how could I fix it? This repository should work on your simulator without throwing an error if in case someone wants try it out. enter image description here

Upvotes: 2

Views: 8868

Answers (1)

Colin Young
Colin Young

Reputation: 3058

FlatList with Image has an open issue on Android: https://github.com/facebook/react-native/issues/13413. There are some tips on performance here: https://github.com/filipemerker/flatlist-performance-tips/

As a first attempt to fix, try adding removeClippedSubviews to your FlatList, although that comes with trade offs.

I also note in the screenshot that you are getting a warning about missing keys. Fix that issue and try keyExtractor and see if that improves things.

Alternatively, use something other than FlatList, e.g. ScrollView. You will lose some of the features of the FlatList but if you get acceptable memory usage and performance, it may be worth it.

Upvotes: 3

Related Questions