javascript - infinite Render in React

Question

I am having problem figuring out why my application is doing endless render.

Inside, My stateful component, I am calling a redux action in componentDidMount method (calling componentWillMount also do endless render)

class cryptoTicker extends PureComponent {
  componentDidMount() {
    this.props.fetchCoin()
    // This fetches some 1600 crypto coins data,Redux action link for the same in end
  }

  render() {
    return (
      <ScrollView>
        <Header />
        <View>
          <FlatList
            data={this.state.searchCoin ? this.displaySearchCrypto : this.props.cryptoLoaded}
            style={{ flex: 1 }}
            extraData={[this.displaySearchCrypto, this.props.cryptoLoaded]}
            keyExtractor={item => item.short}
            initialNumToRender={50}
            windowSize={21}
            removeClippedSubviews={true}
            renderItem={({ item, index }) => (
              <CoinCard
                key={item["short"]}
              />
            )} 
          />
        </View>
      </ScrollView>
    )
  }
}

In CoinCard I am literally doing nothing besides this (Notice CoinCard inside Flat list)

class CoinCard extends Component {
  render () { 
    console.log("Inside rende here")
    return (
        <View> <Text> Text </Text>  </View>
    )  
  }
}

Now, When I console log in my coincard render, I can see infinite log of Inside rende here

[Question:] Can anyone please help me figure out why this could be happening?

You can click here to see my actions and click here to see my reducer.

[Update:] My repository is here if you want to clone and see it by yourself.

[Update: 2]: I have pushed the above shared code on github and it will still log endless console.log statements (if you can clone, run and move back to this commit ).

[Update:3]: I am no longer using <ScrollView /> in <FlatList /> also when I mean endless render, I mean is that it is endless (& Unecessarily) passing same props to child component (<Coincard />), if I use PureComponent, it won't log endlessly in render () { but in componentWillRecieveProps, If I do console.log(nextProps), I can see the same log passed over and over again

Answer 1

There are some points to note in your code.

• The CoinCard Component must be a PureComponent, which will not re-render if the props are shallow-equal.
• You should not render your Flatlist inside the ScrollView component, which would make the component render all components inside it at once which may cause more looping between the Flatlist and ScrollView.
• You can also a definite height to the rendered component to reduce the number of times component is rendered for other props.

• Another thing to note is, only props in the component are rendered on scroll bottom, based on the log statement mentioned below.

  import {Dimensions} from 'react-native'
  
  const {width, height} = Dimensions.get('window)
  
  class CoinCard extends React.PureComponent {
  render () { 
    console.log(this.props.item.long)  //... Check the prop changes here, pass the item prop in parent Flatlist. This logs component prop changes which will show that same items are not being re-rendered but new items are being called.
    return (
      <View style={{height / 10, width}}> //... Render 10 items on the screen
        <Text>
          Text
        </Text>
      </View>
    )  
   }
  }
  

UPDATE

This extra logging is due to the props being from the Flatlist to your component without PureComponent shallow comparison.

Note that componentWillReceiveProps() is deprecated and you should avoid them in your code. React.PureComponent works under the hood and uses shouldComponentUpdate to use shallow comparison between the current and updated props. Therefore log console.log(this.props.item.long) in your PureComponent' render will log the unique list which can be checked.