- FrontendJoy
- Posts
- Is React as hard/complex as it sounds?
Is React as hard/complex as it sounds?
7 Reasons Why React Feels Hard (and How to Fix It)
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.
7 Reasons Why React Feels Hard (and How to Fix It)
Table of Contents
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
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:
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.
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 😅.
Summary
Is React as hard as it sounds? No.
React is just a JavaScript library. Most of the complexity comes from:
Not knowing JavaScript well enough
Confusing React with frameworks
Trying to do everything yourself
Overlooking React basics
Remember, every expert was once a beginner.
With the right mindset and tools, React can be your secret weapon for building amazing apps.
You’ve got this 💪.
Bonus: Download my free eBook, 101 React Tips & Tricks, and save hours of frustration while building smoother, faster React apps.
💡FOOD FOR THOUGHT
Frontend developers, here’s the biggest myth:
𝙔𝙤𝙪 𝙣𝙚𝙚𝙙 𝙚𝙭𝙥𝙚𝙣𝙨𝙞𝙫𝙚 𝙩𝙤𝙤𝙡𝙨 𝙩𝙤 𝙡𝙚𝙖𝙧𝙣.
Truth:
- @frontendmentor has free projects.
- JavaScript Info covers everything you need for JavaScript.
- React’s official docs are gold.Free doesn’t mean… x.com/i/web/status/1…
— Ndeye Fatou Diop 🚢 💻 | DEV | 🇸🇳🇫🇷 (@_ndeyefatoudiop)
8:02 AM • Nov 29, 2024
💡SPOT THE ISSUE
What is wrong with this #javascript code?
— Ndeye Fatou Diop 🚢 💻 | DEV | 🇸🇳🇫🇷 (@_ndeyefatoudiop)
12:03 PM • Nov 25, 2024
What'd you think of this issue? |
Reply