My screen is receiving comments one by one (every 1 second). It doesn't lag in the first few comments, but as the number of comments added increases, my application starts lagging, and eventually, it's almost freezing. This issue is not related to the images and names I fetch from the API because it lags even when I add comments from just the JSON file
I made various adjustments with FlatList, but it didn't work. And I have this component, which I wrap with a scrollView inside App.js and it automatically scrolls. I turned off the scrollView, and when I display it directly on the screen, there is lag. So, the issue is entirely related to the number of comments on the screen.
seEffect(() => {
const getData = async () => {
try {
let apiUrl = `https://randomuser.me/api/?results=60&nat=${language}`
let jsonData
if (language === "tr") {
jsonData = require(`./languages/commentstr.json`);
}
else {
jsonData = require(`./languages/commentsus.json`);
}
const res = await axios.get(apiUrl);
setResults(res.data.results);
const userCount = res.data.results.length;
const commentCount = jsonData.length;
let randomComments = [];
for (let i = 0; i < userCount; i++) {
const commentIndex = i % commentCount;
randomComments.push(jsonData[commentIndex].text);
}
setComments(randomComments);
const interval = setInterval(() => {
if (currentIndex < userCount) {
setCurrentIndex((prevIndex) => prevIndex + 1);
} else {
clearInterval(interval);
}
}, 1000);
} catch (error) {
console.log("hata var:", error);
}
};
getData();
}, [language]);
Solve It. I should use React.memo and crashing stop.
Usage:
We should wrap the component with React.memo()
export default React.memo(MyComponent);