Flatlist continuous scroll heats IOS device

[BasilJohn]

Flatlist scroll heats device on IOS

React Native version:
0.59.5

Steps To Reproduce

1.Created a flat list Component
2.Fetched data from api and rendered the list

Describe what you expected to happen:

The device should not get heated when scrolling up and down within the screen

class NotificationComponent extends Component {
constructor(props) {
super(props);
// All local states for read and write purposes has been declared here
this.state = {
// dashBoardData: null,
// activeSlide: 0,
notifications: [],
lazyNotifications: [],
notifcationReaded: [],
showLoader: true,
goToDetail: false,
disabledCardTap: false,
page: 0,
loading: true,
data: [],
page: 1,
seed: 1,
error: null,
refreshing: false
};
}

/* **************************
Function: componentDidMount()
Explanation:

Creator: Jose || Date: 2018-09-26
************************** */
componentDidMount() {

this.getNotification();

}

getNotification=()=>{

const { page, seed } = this.state;
const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`;
this.setState({ loading: true });

fetch(url)
  .then(res => res.json())
  .then(res => {
    this.setState({
      data: page === 1 ? res.results : [...this.state.data, ...res.results],
      error: res.error || null,
      loading: false,
      refreshing: false
    });
  })
  .catch(error => {
    this.setState({ error, loading: false });
  });

}

handleEnd=()=>{

this.setState(
  {
    page: this.state.page + 1
  },
  () => {
    this.getNotification();
  }
);

}

getFlatList = () => {
// const styles = createStyle();
return (
<FlatList
data={this.state.data}
renderItem={({ item }) => (

)}
extraData={this.state}
keyExtractor={item => item.email}
onEndReached={this.handleEnd}
onEndReachedThreshold={50}
removeClippedSubviews
// ListFooterComponent={() => this.state.loading
// ?
// : null
// }
/>
)
}

render() {
// const styles = createStyle()
// const commonStyleVal = createCommonStyles()
return (

{this.getFlatList()}

);
}
}

--GLIST Item Code
import React, { PureComponent } from 'react';
import { I18nManager, Platform, View, ViewPropTypes } from 'react-native';
import PropTypes from 'prop-types';

export default class GListItem extends PureComponent {

constructor (props) {
    super(props);

   
}

render () {

    return (
        <View style={{height:100,width:"90%",backgroundColor:"grey",margin:10}}>
            
        </View>
    );
}

}

[mrspeaker]

[EDIT: I decided to repost this as a separate issue as it is in a different version, and I think is not related to scrolling: https://github.com//issues/25825]

I'm not sure if it's related, but after seeing some very laggy performance with a FlatList, I made a simple test case to see how things are rendered. It seems like it was rendering repeatedly, and too much data - but I don't know how it works "under the hood", so perhaps the behaviour is expected.

I am using a FlatList to render an array of 400 strings (const data = [...Array(400)].map((_, i) => a-${i});) into text elements:

const App = () => {
  return (
    <View style={{ height: 400 }}>
      <FlatList
        data={data}
        renderItem={({ item, index }) => {
          console.log(item, index);
          return (
            <Text>
              {item}:{index}
            </Text>
          );
        }}
        keyExtractor={(item, index) => item}
      />
    </View>
  );
};

The console.log statement is logging many times. First it logs from index 0 to 9 (the first 10 elements of the array) then it immediately logs again from 0 to 30 (which is more than enough to fill the view), then immediately again from 0 to 180, and immediately again from 0 to 226.

Does that mean each item is re-rendered multiple times, and 226 elements are all rendered on the first page load - or is that just a "first pass" and rendering is somehow deferred? Or is the act of console.logging causing the rerenders?

I'm using RN version 0.60. You can see the console.login action here: https://www.youtube.com/watch?v=kTXgZcm0cvg

Also interesting, setting disableVirtualization: true makes the component work "correctly" - only rendering the first chunk until you scroll down... but I don't think that is recommended!

[nfcampos]

I think it might be for measuring size of each item, which can be avoided by specifying getItemLayout https://facebook.github.io/react-native/docs/flatlist#getitemlayout

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.