Small things do matter

I'm sure most of web devs have seen these pop up in their consoles,
but to me it was something annoying...

Why?
Imagine you install React, do some fetching, and loop over that fetched data — that's it — you're on the 50th line of your code and this pops.

Backstory
I was learning some things about tanstackquery, so I decided to create a new project.

Back to the topic —
So I stared at my code for about 5–10 minutes and this is what I said:

"What the actual F?"

What I was staring at:

The reason was pretty simple:
The browser said there's a load of work when rendering.

So what actually came to my mind was to check the data.
I commented it out.
It worked fine — "No BS", no warnings.

Boom. Checked the Network tab — it was an array of 200 objects.

“That’s why,” I said to myself, despite having faced more complex issues before.

Even in the noise of complex tools and modern frameworks, it's the small mistakes that slow us down the most.
Working on complex tools means nothing if small details are missed.

This was happening because I was looping over 200 objects onto the page as soon as data is fetched —
No Progressive Disclosure, which of course was going to cause a performance issue.

So I fixed it by adding a simple state, and based on that state i show initially only 10 items, and i also added a pretty simple button which said "Go Ahead" at the bottom and clicking it loads 10 more items from data and so on until there's no more left.
Warning was gone, felt pretty good.

It was a very small problem,
but these are what pile up and become a headache,
so I hope you are focusing on small things too.