7 Mistakes I Made When I First Learned React (And How I Fixed Them)
Learning React was one of the most exciting—and confusing—parts of my frontend journey. I made a bunch of mistakes early on that, looking back, totally slowed me down. If I had known what I know now, things would’ve moved much faster.
So here are 7 real mistakes I made when I was just getting started with React, and how I eventually figured them out.
1. Overusing useState for everything
What I did:
At first, I thought useState was the only way to manage state. I used it for everything, even complex or deeply nested data.
What I learned:
I discovered useReducer for more complex state logic, and started using Context to share state across components. Life got easier real quick.
2. Ignoring project structure
What I did:
I dumped everything—components, styles, assets—into one big folder. Zero organization.
What I learned:
I started following better structures like feature-based folders and Atomic Design. It made my codebase way easier to manage and scale.
3. Relying too much on CSS classes
What I did:
I used a million CSS classes for every UI element. It looked messy and was hard to maintain.
What I learned:
Switching to Tailwind CSS and breaking my UI into reusable components helped a lot with both readability and maintainability.
4. Not understanding the difference between JSX and HTML
What I did:
I treated JSX like it was just plain old HTML, which caused a lot of syntax errors and confusion.
What I learned:
Once I understood that JSX is JavaScript, not HTML (e.g. className, self-closing tags, camelCase), things started to click.
5. Misusing useEffect
What I did:
I used useEffect without really understanding how it worked. I ended up causing infinite loops or making duplicate API calls.
What I learned:
I learned how to properly use the dependency array and started using tools like React Query and SWR for data fetching.
6. Mixing UI and logic in the same file
What I did:
All the logic and UI were in the same file. It was hard to test, hard to update, and a mess to read.
What I learned:
I started creating custom hooks to separate logic from presentation. My components became a lot cleaner and easier to manage.
7. Skipping testing entirely
What I did:
I didn’t write any tests. Debugging was a nightmare when something broke.
What I learned:
I started writing simple tests using Jest and React Testing Library. Even basic tests gave me more confidence in my code.
Final thoughts:
Every one of these mistakes helped me grow. If you’re just getting into React, I hope my experience helps you avoid some of these traps—or at least spot them early.
And if you’ve made similar mistakes, I’d love to hear about them. Let’s learn from each other!
Written by *Mahdi *– a frontend developer who loves learning and sharing his journey.
