Hi everyone,
Over the past few years I’ve worked on several projects using React, React Native and more recently Next.js. While building real production applications, I made quite a few mistakes that taught me valuable lessons.
I wanted to share a few of them here. Maybe they can save someone else some debugging time.
1. Not thinking about project structure early
When starting a project, it's tempting to move fast and not worry too much about folder structure. I did this in a few projects.
Everything worked fine at the beginning, but as the codebase grew it became harder to maintain.
Files were scattered, components became large, and new developers struggled to understand the code.
Later we reorganized the project into clearer folders like:
- components
- hooks
- services
- utils
After that, navigating the project became much easier.
2. Fetching data the wrong way in Next.js
When I first started working with Next.js, I treated it like a normal React app and fetched most data on the client side.
But later I realized some pages loaded slower than necessary.
For pages that needed fast loading or SEO, fetching data on the server side worked much better.
Understanding when to use server-side data fetching versus client-side fetching made a big difference.
3. Ignoring caching for API calls
Another mistake I made earlier was not thinking about caching API requests.
In some applications the UI made the same API request multiple times, which slowed things down and increased server load.
After introducing TanStack Query (React Query) for API management, things improved a lot.
It handled caching, loading states, and retries in a much cleaner way.
4. Not paying attention to loading and error states
In early versions of some apps I built, the UI didn’t handle loading states very well.
Sometimes users would see blank screens while data was loading, which made the app feel broken.
Now I try to always think about:
- loading indicators
- skeleton UI
- proper error messages
These small things make the app feel much more polished.
5. Spending too much time debugging the wrong thing
One thing I learned the hard way is that many bugs are actually simple configuration issues.
For example:
- incorrect environment variables
- wrong API URLs
- missing headers
Now whenever something breaks, the first thing I check is the Network tab and request data before digging deeper into the code.
It saves a lot of time.
Final thoughts
Building production applications teaches you a lot more than tutorials.
Mistakes are part of the process, and every project improves your understanding of how to structure applications and solve problems.
I’m still learning and improving every day.
If you’ve worked on React or Next.js projects, I’d be interested to hear what mistakes taught you the most.
Thanks for reading.
Top comments (0)