Ndeye Fatou Diop

Posted on Dec 3 • Originally published at frontendjoy.com

Is React as hard/complex as it sounds?

#webdev #react #beginners #javascript

Does React seem overwhelming to you?

If so, you’re not alone.

I hear things like these all the time:

Don’t use React; use Vue instead.
React is hard and useless; use HTMX or Vanilla JS instead.
Etc.

But as a Senior Frontend Engineer with 5+ years of experience at Palantir, I can confidently say: “React was the easiest thing I had to learn.”

In this post, I’ll explain why React isn’t as complex as people make it out to be—and how to tackle the challenges if you’re struggling.

Ready? Let’s dive in.

📚 Download my FREE 101 React Tips And Tricks Book for a head start.

7 Reasons Why React Feels Hard (and How to Fix It)

Reason 1: You Don’t Know JavaScript Well Enough

People struggle with React 99% of the time because their JavaScript foundation isn’t solid.

This was true for me, too—I couldn’t understand React code at first. I spent months struggling to write anything decent. That all changed when I learned JavaScript.

Here’s the minimum you need to know before learning React:

The difference between primitive and object data types
Objects destructuring
Scope
Closures
Async
Etc.

👉 Check out this great guide by Kent C. Dodds on the JavaScript concepts you need to know for React.

Once your JavaScript skills improve, React will feel much easier.

💡 Check out my post How to level up your frontend skills for useful resources to learn JavaScript.

Reason 2: You’re Using the Wrong Tools

If you’re new to React, don’t set yourself up for failure by picking outdated or overly complex tools:

Don’t use Create React App: It’s outdated, slow, and lacks extensibility.
Don’t use Next.js (for now): While amazing, it adds a learning curve you don’t need as a beginner.

Instead, start with Vite. It’s fast, simple, and beginner-friendly. You’ll thank me later 😅.

Reason 3: You’re Confusing React with Frameworks

React ≠ Next.js ≠ Remix.

Next.js and Remix are frameworks built on top of React to create full-stack applications.

You don’t need to know Next.js or Remix to learn React.

But you need to know React to use any of them.

So, focus on React first. Frameworks can come later since they add a layer of complexity.

Reason 4: You’re Trying to Build Everything From Scratch

Building everything from scratch—especially with accessibility in mind—can be overwhelming.

However, you don’t have to face it alone.

The beauty of React is its ecosystem of libraries that make your life easier 🎊.

Think of them as shortcuts. Why reinvent the wheel when someone else has already built an incredible one?

Here are some examples:

dnd-kit for drag-and-drop functionality
shadcn/ui for styling
SWR for lightweight data fetching
etc.

Save time and effort by leveraging these tools.

Reason 5: You’re Understaffed but Not Using Frameworks

If you’re short on time or resources (like a one-person team), frameworks like Remix or Next.js can be lifesavers.

When to use them:

You’re understaffed
You’re building a full-stack app
You want built-in routing, server-side rendering, and more

If you don’t need a full-stack solution, stick to React with React Router and a few essential libraries.

Reason 6: You Don’t Understand React’s Rendering Process (And End Up With Performance Issues)

Understanding React’s rendering process is critical for avoiding performance issues:

Rendering: React calls component functions (or class component render methods) to generate the virtual DOM.
Reconciliation: React compares the virtual DOM with the real DOM to figure out what changed.
Commit Phase: React updates only the necessary DOM elements.
Painting: The browser repaints the screen.

React Render Process. Credits: https://x.com/_georgemoller

Common mistakes people make:

Too many renders: Fix this by minimizing state, keeping state low in the component tree, and using memoization where needed (don’t @ me 😅: memoization can be life-changing).

👉 Check out this guide on React re-renders.
Overusing useEffect: Many effects can be avoided. See, You Might Not Need an Effect.
Not following conventions: For example, when rendering lists, always use unique keys to prevent bugs.

Reason 7: Your App Breaks in Production

If your app works in development but breaks in production, it’s time to add testing and a type checker.

I know, I know—testing and TypeScript might sound like overkill. But hear me out.

They’re your safety nets, catching bugs before they reach your users.

Your future self will thank you!

Here’s what I recommend:

Type Checker: Use TypeScript. It’s beginner-friendly, especially with this guide. If you’re using Vite, the setup is simple.
Testing: Use Vitest with Vite or React Testing Library for other setups.

Tests and types will save you hours of debugging—and keep you sane 😅.