Lag spike when drawing loads of components at once

about 2 years ago - Direct link

Hello, I am experiencing a huge lag spike when I fetch some data from my server and try to draw some components to the screen..

My code is as follows:

Inventory(parent) component has this useEffect:

  useEffect(() => {

fetchContent();
}, []);

And I am using axios to fetch data from my back end as so:

const fetchContent = () => {

setisFetching(true);
Axios({
method: "GET",
url: INVENTORY,
})
.then((res) => {
setisFetching(false);
setfetchedInventory(res.data.data);
})
.catch((err) => {
setisFetching(false);
console.log(err);
});
};

And I am setting the state according to the data that I get. Usually this will be an array of about 20 objects. Based on those 20 objects I am rendering a component for each of them as so:

{isFetching ? (






) : (
processedInventory.map((item) => (

))
)}

Now as you can see, if isFetching is true, render the loading icon, if isFetching is false, render and component for each item that we fetched previously. Here I am using processedInventory as opposed to fetchedInventory from before, which basically gives me the ability to render only items that match to the search box.

Here is the code that transforms fetchedInventory into processedInventory:

  useEffect(() => {

// Whenever the fetchedInventory or searchValue changes,
// make sure that the processedInventory is up to date
if (searchValue.length > 0) {
setprocessedInventory(
fetchedInventory.filter((item) =>
item.title.toLowerCase().includes(searchValue.toLowerCase())
)
);
} else {
setprocessedInventory(fetchedInventory);
}
}, [searchValue, fetchedIn...


Go to article →