I have a list of 300 items. I'm using FlatList to render the items.
ISSUE :
- List items re-rendering when I scroll the screen. Even when I have wrapped the component in React.memo.
I tried to optimise the list by tweaking the windowSize, maxToRenderPerBatch but the issue still persist.
You can check the code in below sandbox link.
Thankyou in advance !
https://codesandbox.io/s/gracious-dhawan-i4d51h?file=/src/App.js
EDIT :
I have shared the code snippet
const data = [
{
id: 1,
first_name: "Shaina",
last_name: "Osorio",
email: "sosorio0@a8.net"
},
{
id: 2,
first_name: "Ania",
last_name: "Cotilard",
email: "acotilard1@about.me"
},
{
id: 3,
first_name: "Hagen",
last_name: "Lisciandri",
email: "hlisciandri2@nature.com"
}
]
const isEqual = (prev, next) => {
return true;
};
const RenderItem = React.memo((props) => {
const { id, first_name, email } = props;
console.log("id >>> ", id);
return (
<View
style={{
padding: 5,
backgroundColor: "lightblue",
marginVertical: 3
}}
>
<Text>First Name : {first_name}</Text>
<Text>Email : {email}</Text>
</View>
);
}, isEqual);
function App() {
return (
<View style={{ flex: 1 }}>
<FlatList
data={data}
renderItem={({ item }) => (
<RenderItem
id={item.id}
first_name={item.first_name}
email={item.email}
/>
)}
initialNumToRender={15}
maxToRenderPerBatch={15}
keyExtractor={(item) => item.id}
/>
</View>
);
}
export default App;